我正在学习如何用Ionic构建一个应用程序，所以我是一个非常初学者的语言。我目前的项目是一个购物清单应用程序，它应该允许用户添加和删除项目以及编辑它们。目前我正处于开始阶段。事情进展顺利，直到我试图通过分离代码和添加服务来清理代码。我能够添加，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，删除，并按计划编辑项目，所有内容都按预期显示。现在应用程序加载，底部的标签加载，但任何实际标签的内容都不加载。

我期待着标签加载，因为他们在分裂之前。我已经尝试重新观看我的类的视频，但他们是9岁，不是很有帮助。据我所知，我有所需的元素到位，但我只能假设我在清理的时候不小心删除了一些重要的东西。然而，研究这些视频和更新的视频以及GitHub上的应用程序并没有告诉我我错在哪里。
我唯一做过修改的页面如下：
tab1.page.ts

import { Component } from '@angular/core';
import { GroceriesServiceService } from '../groceries-service.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  title = "Grocery List";

  constructor(public groceriesService: GroceriesServiceService) {}

  loadItems(){
    return this.groceriesService.getItems();
  }

  removeItem(item, index){
    this.groceriesService.inputDialogService.presentToast('bottom', item);
    this.groceriesService.removeItem(index);
  }

  editItem(item, index) {
    this.groceriesService.inputDialogService.promptAlert(item, index);
    this.groceriesService.editItem(item, index);
  }

  addItem() {
    this.groceriesService.inputDialogService.promptAlert();
  }

}

tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      <h2>{{title}}</h2> 
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-fab slot="fixed" vertical="top" horizontal="end">
  <ion-fab-button (click)="addItem()">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

<ion-content padding>
  <h3 text-center *ngIf="loadItems().length === 0">
    No items listed.
  </h3>
  <ion-list>
    <ion-item-sliding *ngFor="let item of loadItems(); let i = index">
      <ion-item>
        <div>
          <h5>{{item.name}}</h5>
          <p>{{item.quantity}}</p>
        </div>
      </ion-item>
  
      <ion-item-options>
        <ion-item-option color="success" (click)="editItem(item,i)">
          <ion-icon name="pencil"></ion-icon> 
          <div>
            <p>Edit</p>
          </div>
      </ion-item-option>
          <ion-item-option color="danger" (click)="removeItem(item, i)">
              <ion-icon name="trash"></ion-icon> 
              <div>
                <p>Delete</p>
              </div>
          </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    
  </ion-list>
</ion-content>

tabs.page.html

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon aria-hidden="true" name="basket-outline"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon aria-hidden="true" name="book-outline"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon aria-hidden="true" name="people-outline"></ion-icon>
      <ion-label>Contacts</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

groceries-service.ts

import { InputDialogService } from './input-dialog.service';

export class GroceriesServiceService {
  items = [];

  constructor(public inputDialogService: InputDialogService) { 

  }

  getItems(){
    return this.items;
  }

  removeItem(index){
    this.items.splice(index, 1);
  }

  editItem(item, index){
    this.items[index] = item;
  }

  addItem(item){
    this.items.push(item);
  }

}

input-dialog-service.ts

import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';
import { GroceriesServiceService } from './groceries-service.service';

@Injectable({
  providedIn: 'root'
})
export class InputDialogService {

  handlerMessage = '';
  roleMessage = '';
  
  async presentToast(position: 'top' | 'middle' | 'bottom', item) {
    const toast = await this.toastController.create({
      message: "Removing item - " + item.name ,
      duration: 1500,
      position: position
    });

    await toast.present();
  }

  async promptAlert(item?, index?) {
    const alert = await this.alertController.create({
      header: 'Please enter the item information',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            this.handlerMessage = 'Alert canceled';
          },
        },
        {
          text: 'Add',
          role: 'confirm',
          handler: data =>  {
            this.handlerMessage = 'Alert confirmed';
            console.log("Item added: " + data.name);
            if(index != undefined) {
              this.groceriesService.editItem(item, index);
            }
            else {
              this.groceriesService.addItem(data);
            }
          },
        },
      ],
      inputs: [
        {
          name: 'name',
          placeholder: 'Name',
          value: item ? item.name : null
        },
        {
          name: 'quantity',
          type: 'number',
          placeholder: 'Quantity',
          value: item ? item.quantity : null
        }
      ],
    });

    await alert.present();
  }

  constructor(private toastController: ToastController, private alertController: AlertController, public groceriesService: GroceriesServiceService) { 
    
  }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Groceries App</title>

  <base href="/" />

  <meta name="color-scheme" content="light dark" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
  <app-root></app-root>
</body>

</html>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GroceriesServiceService } from './groceries-service.service';
import { InputDialogService } from './input-dialog.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}