4

组件A.ts：

@Input() array;

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

组件B.ts：

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

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

谢谢..

4

1 回答 1

3

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

有两种解决方案：

1) 返回新数组

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

或者

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

普朗克

2）使用不纯的管道

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

普朗克

有关更多详细信息，另请参阅

于 2016-10-09T08:05:36.293 回答