从订阅中获取未定义的属性未完成

Question

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

我有两项服务 'itemsService'、'detailsItemService' 从我的 Firestore 集合 'items' 和 'detailsItem';

收集和 return 数据

// 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 where undefined id 'details'

感谢您的帮助:')

Answer 1

直接使用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">

从订阅中获取未定义的属性未完成

Got undefined properties from subscribe not finished

subscribe

angular