InvalidPipeArgument： '[object Object]' for pipe 'AsyncPipe' -->适用于第一个循环，但不适用于后面的循环

Question

我有使用Firebase后端的Ionic(3.9.x(应用程序以及AngularFire最新版。

在我的模板中，我有这段代码

<div *ngIf="phone | async">
<ion-list *ngFor="let ph of phone | async">
<ion-item-sliding>
<button ion-item (click)="phClick(ph)" >
<ion-icon name="call" item-start></ion-icon>
{{ph.type}}: {{ph.value }}
</button>
<ion-item-options>
<button ion-button color="danger" (tap)="delete(ph)" >
<ion-icon name="delete"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</div>
<button ion-button clear (tap)="phClick(ph=null)" >
Add More Phone...
</button>
<div *ngIf="email | async">
<ion-list *ngFor="let em of email | async">
<ion-item-sliding>
<button ion-item (click)="emClick(em)" >
<ion-icon name="mail" item-start></ion-icon>
{{em.type}}: {{em.value }}
</button>
<ion-item-options>
<button ion-button color="danger" (tap)="delete(em)" >
<ion-icon name="delete"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</div>
<button ion-button clear (tap)="emClick(em=null)" >
Add More Email..
</button>
<div *ngIf="website | async">
<ion-list *ngFor="let web of website | async">
<ion-item-sliding>
<button ion-item (click)="webClick(web)" >
<ion-icon name="link" item-start></ion-icon>
{{web.type}}: {{web.value }}
</button>
<ion-item-options>
<button ion-button color="danger" (tap)="delete(web)" >
<ion-icon name="delete"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</div>

控制台错误不会针对第一个电话或电话列表显示，但在接下来的两个电子邮件和网站列表中显示

在我的组件中，我的 Oninit 中有以下内容

ngOnInit(){
if (this.user){
this.email = this.fs.colWithIds$(`users/${this.user.uid}/email`);
this.phone = this.fs.colWithIds$(`users/${this.user.uid}/phnumbers`);
this.website = this.fs.colWithIds$(`users/${this.user.uid}/website`)
} 
}

我的获取数据的服务返回一个可观察的数组，如下所示

colWithIds$<T>(ref: CollectionPredicate<T>, queryFn?): Observable<any[]> {
return this.col(ref, queryFn).snapshotChanges().map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
});
}

我对组件类中变量的声明是简单的非类型化

export class myPage implements OnInit {
email;
phone;
website;

为什么错误只显示电子邮件和网站，而不是电话？我在这里错过了什么。

谢谢。

Answer 1

感谢人们试图帮助我。我发现了错误，这真的很奇怪.. 在顶部模板的某个地方，我有

<ion-input type="text" [(ngModel)]="user.email" name="email" #email="ngModel" required></ion-input> 

我想因为这个名字是电子邮件，后来我在电子邮件字段上使用 ngfor，所以它发生了冲突。我将 ngFor 更改为 emdata 的 em，事情开始工作:)\