Angular ngOnInit中未定义角度异步输入？

我有一个父组件从API向子组件传递数据，如下所示：

.ts

.html

---

我知道这是因为数据是异步的，当它调用ngOnInit时，数据还没有到达该组件，但是如何在init上加载数据，或者至少在异步完成时更新数据？

我正在考虑多个选项

第一个选项是仅在API调用解析时创建子组件

例如：

<ng-content *ngIf="(data | async) as loadedData">
    <child [data]="loadedData"></child>
</ng-content> 

SimpleChanges

是一个更改哈希表。有关详细信息，请参见和；-）

我认为最后一个选择是：

子组件.ts

@Input() data: Data[];

ngOnChanges(changes: SimpleChanges){
    // If changes.data is set the data input has changed
    if (changes.data) {
        this.processData();
    }
}

@Input()
set data(value: Data[]) {
  this._data = value;
  this.processData(); 
}

使用最后一个选项，您将在每次调用setter时处理数据。这与第二种选择没有太大区别

---

我建议您选择最后一个选项，因为您不需要做太多更改；-）

我知道这已经得到了回答，但我想指出

ngOnChanges

SimpleChanges

具有非常酷的道具，如

previousValue

和

currentValue

，因此您可以制作如下内容：

ngOnChanges（更改：SimpleChanges）{
const{myExpectedProp}=更改；
如果（myExpectedProp.previousValue！==myExpectedProp.currentValue）{
这个。doSomething（）；
}
}

是不是很棒？如果您没有使用

async

pipe，这非常方便

不要忘记实现接口：

import{Component，Input，OnChanges，OnInit，SimpleChanges}来自'@angular/core'；
导出类YourComponent实现OnInit，OnChanges{
// ...
}

您可以在setter的末尾进行处理：（

设置数据（…）{this.\u data=value；doProcessing（）；}

）。这已经得到了回答，但我发现最简单的方法是将processData（）方法移到数据setter中。只需确保添加if（数据），因为在稍后获取实际数据之前，异步调用将有一个空值。感谢您的响应，但是在尝试所有这些之后，我在我的其他属性之一上不断获得ExpressionChangedTerrithasBeenCheckedError。。。有什么想法吗？

<ng-content *ngIf="(data | async) as loadedData">
    <child [data]="loadedData"></child>
</ng-content> 

@Input() data: Data[];

ngOnChanges(changes: SimpleChanges){
    // If changes.data is set the data input has changed
    if (changes.data) {
        this.processData();
    }
}

@Input()
set data(value: Data[]) {
  this._data = value;
  this.processData(); 
}