时间戳

首页 > 解决方案 > 在我的 Angular html 模板中安全加载数组时遇到问题

arrays - 在我的 Angular html 模板中安全加载数组时遇到问题

问题描述

我有一个.subscribe在我的 API 之后填充的数组。控制台显示它按预期填充。访问数组的元素会导致由于未定义而引发错误

<div *ngIf="!invoices || invoices.length === 0">
       No invoices
</div>
<div *ngIf="invoices || async ">
      {{ invoices[0]?.invoice_id || async}}
</div>

如果我删除 elvis 运算符，我的内容将正常加载，但是控制台将抛出错误InvoicesComponent.html:10 ERROR TypeError: Cannot read property 'invoice_id' of undefined，直到从 subscribe 函数填充数组。

发票数组在我的服务中初始化

 invoices: Array<Invoice> = [];

我填充数组

getInvoices(){
   var _invoices = this.invoices;
   if(this.afAuth.user){
      // users/uid/invoices/invoice_id/
      var userRef = this.afs.doc(`users/${this.afAuth.auth.currentUser.uid}`)

 userRef.collection('invoices').get().subscribe(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
        _invoices.push({
          'invoice_id': doc.id, 
          'customer_company': doc.data().customer_company, 
          'year_id':doc.data().year_id, 
          'date_created': doc.data().date_created, 
          'date_modified': doc.data().date_modified})
    });
    console.log(_invoices)
});
return _invoices
}

根据 trichetriche 的建议，创建了一个 `Invoice 类

import { QueryDocumentSnapshot } from  "@angular/fire/firestore";
import { of } from 'rxjs'

export class Invoice {
    invoice_id: string;
    customer_company: string;
    date_created: string;
    date_modified: string;
    year_id: string;

constructor(invoiceDoc: QueryDocumentSnapshot<any>){
    this.invoice_id = invoiceDoc.id
    this.customer_company = invoiceDoc.data().customer_company
    this.date_created = invoiceDoc.data().date_created
    this.date_modified = invoiceDoc.data().date_modified
    this.year_id = invoiceDoc.data().year_id
}

    toObservable(){
        return of(this)
    }
}

标签： arraysangularundefined

解决方案

我认为您以错误的方式使用异步管道。

您可以将 Observable 直接传递给模板，代码将如下所示：

   <div *ngIf="invoices|async as invoicesList; else noInvoices">
     {{ invoicesList[0]?.invoice_id}}
   </div>
   <ng-template #noInvoices>
     <div  >
       No invoices
     </div>
   </ng-template>

推荐阅读