在 Angular2 中动态更新 [checked]

Question

componentA.ts:

@Input() array;

<input type="checkbox" [checked]="array | contains: value"/>
<label>{{array.length}}</label>

componentB.ts:

@Component({
  selector: 'app-component-b',
  templateUrl: './app.component-b.html'
})
export class AppComponentB {
  array = [1, 2, 3];
}

我在其他一些组件中更新了 array。虽然 label 正确更新了数组的长度，但复选框似乎没有更新。 contains 只是一个简单的管道，用于检查 value 是否是 array 的一部分。我在 contains 管道中放置了一个 console.log 并且仅在页面最初呈现时才获得输出，而不是在更改 array 时获得输出。这是为什么？

谢谢..

Answer 1

这是因为如果您使用 push 向数组添加新项，则数组引用不会更改，而纯管道仅在检测到输入值发生纯粹更改时才会执行 (array 和 value 在你的情况下）

有两种解决方法：

1) return 新数组

this.array = this.array.concat(4)

或

this.array = [...this.array, 4];

Plunker

2) 使用不纯管道

@Pipe({name: 'contains', pure: false})
export class ContainsPipe implements PipeTransform {

Plunker

有关详细信息，另请参阅

Unraveling Angular 2 book, Chapter 1, Example 5
https://angular.io/docs/ts/latest/guide/pipes.html

在 Angular2 中动态更新 [checked]

Dynamically updating [checked] in Angular2

angular2-template

angular-pipe

angular