Angular 4子视图未更新

Question

我的结构如下：

parent.component.html

<listing-categories #listingCategories [categories]="listingsPaths"></listing-categories>

parent.component.ts

this.listingsPaths = [];
for (let category of listing.categories) {
    // Subscribing to a service and pushing the data to an listingPaths
    this._projectService.getCategories().subscribe((data) => {
     this.listingsPaths.push(data);
    });
}

child.component.ts

@Input() public categories;

child.component.html ...

如您所见，我想发送在 promise 中填充的 listingPaths 数组，并且我想在子组件中呈现它。我尝试在子组件上使用 OnChanges，但是当我将新对象推送到数组时没有触发任何更改。

我设法通过创建一个 Observable 并将新添加的项目发送到一个子组件来解决问题。我想如何将一个数组作为一个整体发送到一个子组件，而不是一个项目地发射项目。

这是 Observable 的解决方案：

parent.component.ts

_listingPaths = new Subject<any>();
_listingPathsChanges$ = this._listingPaths.asObservable();

在 for 循环中，我没有将项目推送到数组，而是将其发送到子组件：

this._listingsPaths.next(data);

child.component.ts

 this.categories.subscribe((data) => {
     this._categories.push(data); // I don't want this part, I want to receive whole array from a parent
     this.cd.markForCheck();
 })

Answer 1

您是否在子组件中设置了ChangeDetectionStrategy.OnPush？如果是，那么您可能需要将其删除。数组中的任何更改都不是对象引用的更改，因此不会触发更改检测周期。

或者，您可以创建一个 observable 并使用异步管道 (observable$ | async) 将数据发送给孩子。