angular - 我应该如何在 Angular 中正确设置这个属性？

Question

我有一个界面:

export interface ItemResponse {
  get: Array<Item>;
  sent: Array<Item>;
}

我在组件中有一些代码:

itemData: ItemResponse;

ngOnInit() {
  this.getItems();
}

getItems(){
  this.itemService.getAllItem().subscribe(data => {
    this.itemData = data;
  });
}

模板部分:

<item-table [data]="itemData.get"></item-table>

我需要多次使用 Angular Material 表，所以我为此创建了一个组件。想要传递数据源，但我收到下一个错误:

ItemComponent.html:5 ERROR TypeError: Cannot read property 'get' of undefined
    at Object.eval [as updateDirectives] (ItemComponent.html:11)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:30537)
    at checkAndUpdateView (core.js:29933)
    at callViewAction (core.js:30174)
    at execComponentViewsAction (core.js:30116)
    at checkAndUpdateView (core.js:29939)
    at callViewAction (core.js:30174)
    at execEmbeddedViewsAction (core.js:30137)
    at checkAndUpdateView (core.js:29934)
    at callViewAction (core.js:30174)

我应该如何申报这个属性(property)？我尝试了很多方法，例如:

itemData = {get: [], sent:[]} as ItemResponse;

在这种情况下， itemData.get不是未定义的，但它是空的。

你有什么想法，我该怎么办？抱歉语法错误，英语不是我的第一语言。

Answer 1

您收到错误是因为 getItems()执行异步操作和 itemData是 undefined直到订阅返回值 .

您需要使用 async pipe 或 bool 标志(例如 isLoaded )以等待订阅完成。

对于 async管道，您可以执行以下操作:

getItems(){
    this.itemData = this.itemService.getAllItem();
}

并在模板中

<item-table [data]="(itemData | async).get"></item-table>

或者，如果您想使用 bool 标志:

isLoaded = false;

getItems(){
    this.itemService.getAllItem().subscribe(data => {
       this.isLoaded = true;
       this.itemData = data;
    });
}

在模板中:

<item-table [data]="itemData.get" *ngIf="isLoaded"></item-table>

希望这可以帮助