英文:
Ionic App is not displaying content but tabs still show
问题
I am learning how to build an app in ionic so I am very much a beginner to the language. My current project is a shopping list app, which should allow the user to add and remove items as well as edit them. Currently I am in the beginning stages. Things were going well until I tried to clean up the code by separating it out and adding services. I was able to add, remove, and edit items as planned and everything displayed as it was meant to. Now the app loads, and the tabs at the bottom load, but none of the content of any of the actual tabs loads.
I was expecting the tabs to load as they were before the split. I've tried rewatching the videos for my class, but they are 9 years old and not very helpful. As far as I can tell I have the required elements in place, but I can only assume I've deleted something important by mistake when I was cleaning it up. However studying both those videos and newer ones as well as apps on GitHub have not shown me where I went wrong.
The only pages I have made any changes to are as follows:
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"
<details>
<summary>英文:</summary>
I am learning how to build an app in ionic so I am very much a beginner to the language. My current project is a shopping list app, which should allow the user to add and remove items as well as edit them. Currently I am in the beginning stages. Things were going well until I tried to clean up the code by separating it out and adding services. I was able to add, remove, and edit items as planned and everything displayed as it was meant to. Now the app loads, and the tabs at the bottom load, but none of the content of any of the actual tabs loads.
[](https://i.stack.imgur.com/14xJC.png)
I was expecting the tabs to load as they were before the split. I've tried rewatching the videos for my class, but they are 9 years old and not very helpful. As far as I can tell I have the required elements in place, but I can only assume I've deleted something important by mistake when I was cleaning it up. However studying both those videos and newer ones as well as apps on GitHub have not shown me where I went wrong.
The only pages I have made any changes to are as follows:
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 {}
</details>
# 答案1
**得分**: 0
你不需要在杂货服务中导入服务，因为这会导致循环依赖注入错误。
另外，你忘记在你的杂货服务中添加 `Injectable` 装饰器。
```js
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class GroceriesServiceService {
items: any = [];
constructor() {
}
getItems() {
return this.items;
}
removeItem(index: any) {
this.items.splice(index, 1);
}
editItem(item: any, index: any) {
this.items[index] = item;
}
addItem(item: any) {
this.items.push(item);
}
}
另外，在你的标签页中，你错误地调用了服务方法。
import { Component } from '@angular/core';
import { GroceriesServiceService } from '../groceries-service.service';
import { InputDialogService } from '../input-dialog.service';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss'],
})
export class Tab1Page {
title = "Grocery List";
constructor(public groceriesService: GroceriesServiceService, private inputDialogService: InputDialogService) { }
loadItems() {
return this.groceriesService.getItems();
}
removeItem(item, index) {
this.inputDialogService.presentToast('bottom', item);
this.groceriesService.removeItem(index);
}
editItem(item, index) {
this.inputDialogService.promptAlert(item, index);
this.groceriesService.editItem(item, index);
}
addItem() {
this.inputDialogService.promptAlert();
}
}
英文:
You don't need to import service in groceries because it will create circular dependency injection error.
Also you forgot to add Injectable decorator in you groceries service.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class GroceriesServiceService {
items: any = [];
constructor() {
}
getItems() {
return this.items;
}
removeItem(index: any) {
this.items.splice(index, 1);
}
editItem(item: any, index: any) {
this.items[index] = item;
}
addItem(item: any) {
this.items.push(item);
}
}
Also in your tab, you are calling the service methods incorrectly.
import { Component } from '@angular/core';
import { GroceriesServiceService } from '../groceries-service.service';
import { InputDialogService } from '../input-dialog.service';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss'],
})
export class Tab1Page {
title = "Grocery List";
constructor(public groceriesService: GroceriesServiceService, private inputDialogService: InputDialogService) { }
loadItems() {
return this.groceriesService.getItems();
}
removeItem(item, index) {
this.inputDialogService.presentToast('bottom', item);
this.groceriesService.removeItem(index);
}
editItem(item, index) {
this.inputDialogService.promptAlert(item, index);
this.groceriesService.editItem(item, index);
}
addItem() {
this.inputDialogService.promptAlert();
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论