angular - 在 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) 返回新数组

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

或

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

Plunker

2)使用不纯的管道

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

Plunker

更多详细信息另见

• NgFor doesn't update data with Pipe in Angular2
• Unraveling Angular 2 book, Chapter 1, Example 5
• https://angular.io/docs/ts/latest/guide/pipes.html