angularjs – 动态更新Angular2中的[checked]

发布时间：2020-12-17 17:17:22 所属栏目：安全来源：网络整理

导读：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

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];
}

我更新了一些其他组件中的数组.虽然标签正确更新了数组的长度,但似乎没有更新复选框. contains只是一个简单的管道,用于检查value是否是数组的一部分.我在一个包含管道中放了一个console.log,当页面首先渲染时才得到输出,而不是在更改数组时.为什么是这样？

谢谢..

解决方法

那是因为如果使用push将新项添加到数组中,那么数组引用不会更改,而纯管只有在检测到输入值的纯变化时才会执行(在您的情况下为数组和值)

有两种解决方案：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!