Question

我有一个带有两个数组的组件。 arrayA和arrayB。 arrayB包含arrayA的过滤元素。在模板中：

<div *ngFor="let elem of arrayB">{{elem.something}}</div>

我也有一个按钮：

<button (click)="doSomething()">Do Something</button>

在doSomething方法中，我使用arrayA上的过滤方法更新arrayB。

doSomething() {
    this.arrayB = this.arrayA.filter(elem => { return ***some code***; });
}

问题是视图没有刷新。我尝试使用NgZone（ngZone.run（）：我在方法中包装了代码。）和ChangeDetectorRef（detectChanges（）/ markForCheck（）：我在方法的末尾调用了它。）。

这应该是什么解决方案？

Answer 1

它应该有效！确保您的过滤器正常工作，请检查以下示例：

<div *ngFor="let elemB of arrayB">{{elemB}}</div>
<strong>array A :</strong>
<div *ngFor="let elemA of arrayA">{{elemA}}</div>
<button (click)="doSomething()">Do Something</button>

TS：

 arrayA = [0,1,2,3,4];
 arrayB = [];

 doSomething(){ 
     this.arrayB = this.arrayA.filter(x => { return x > 2; });
 }

https://plnkr.co/edit/VQYoVIGoioPwjW1ThcFQ?p=preview

Answer 2

我使用true返回的false方法。因此，该方法触发了两次。所以解决方案是始终返回10001 AMERICAN EXPRESS,TX, Y 10001 BOFA,IL,N 10001 CHASE,NJ,Y 10002 CHASE,IL,Y 10002 BOFA,TX,Y。

Angular 2：更新数组时视图不会更新

2 个答案: