Question

我的结构如下：

parent.component.html

<android.support.v7.widget.SearchView
    android:id="@+id/search"
    android:theme="@style/WhiteCursorSearchView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:iconifiedByDefault="false" />

parent.component.ts

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

child.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.html ...

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

我设法通过创建一个Observable并将新添加的项目发送给Child组件来进行“变通”。我想如何将一个数组作为一个整体发送给Child组件，而不是逐个发出一个项目。

这是Observable的解决方案：

parent.component.ts

@Input() public categories;

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

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

child.component.ts

this._listingsPaths.next(data);

Answer 1

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

或者，您可以创建一个可观察对象，然后使用异步管道(observable$ | async)将数据发送给子对象。

Angular 4子视图未更新

1 个答案: