从订阅获得未定义的属性尚未完成

问题描述

我正在使用Angular和AngularFire从我的Firestore数据库中获取数据。

我有两个服务“ itemsService”，“ detailsItemService”，它们从我的Firestore集合“ items”和“ detailsItem”收集并返回数据；

// it's the same for detailsItemService
[...]
export class itemsService {

  private items: Observable<Item[]>;

  constructor(
    private db: AngularFirestore,private userService: userService
  ) {
      this.items = db.collection<Item>(
        'items',ref => ref.where('userID','==',this.userService.userID)
      )
      .snapshotChanges()
      .pipe(
        map(array => {
          return array.map(item => {
            return {
              uid: item.payload.doc.id,...item.payload.doc.data()
            } as Item;
          });
        });
      );
  }

  getItems() {
    return this.applications;
  }
}

然后在我的控制器“ itemsCtrl”中，进行订阅以使用uid获取我的“ Items”，然后继续进行forEach以便对每个项及其uid进行订阅“ detailsItem”。

[...]
export itemsCtrl implements OnInit {

  public items = [];

  constructor(
    private itemsService: itemsService
  ) {
    const items = [];

    this.itemsService.getItems().subscribe(items => {
      items.forEach((item,key) => {
        items[key] = item;

        this.detailsItemService.getDetails(item.uid).subscribe(details => {
          items[key].details = details;
        });
      }
      this.items = items;
    });
  }

  [...]
}

但是在我看来，页面开始加载时，我得到了未定义的属性。

<div *ngFor="let item of items">
  <input [(ngModel)]="item.details.name">
</div>

然后我得到这个错误：

ERROR TypeError: Cannot read property 'name' of undefined，其中未定义ID“详细信息”

感谢您的帮助：'）

解决方法

直接使用this.items（getDetails是异步函数，this.items =将在订阅完成之前评估项目）：

this.itemsService.getItems().subscribe(items => {
      items.forEach((item,key) => {
        this.items[key] = item;

        this.detailsItemService.getDetails(item.uid).subscribe(details => {
          this.items[key].details = details;
        });
      }
 });

并检查是否存在详细信息：

<input *ngIf="item.details" [(ngModel)]="item.details.name">

angular subscribe