在Angular 2中,当选中复选框时更改ngFor中的表达式可以通过以下步骤实现:
<div *ngFor="let item of items">
<input type="checkbox" [(ngModel)]="item.checked" (change)="updateExpression()">
{{ item.name }}
</div>
export class MyComponent {
items: any[];
constructor() {
this.items = [
{ name: 'Item 1', checked: false },
{ name: 'Item 2', checked: false },
{ name: 'Item 3', checked: false }
];
}
updateExpression() {
// 在这里更新表达式的逻辑
}
}
updateExpression() {
// 过滤选中的复选框
const selectedItems = this.items.filter(item => item.checked);
// 构建新的表达式
let expression = '';
selectedItems.forEach(item => {
expression += item.name + ', ';
});
expression = expression.slice(0, -2); // 去除最后的逗号和空格
// 更新ngFor中的表达式
// 例如,如果ngFor的表达式是"let item of items | filter:expression"
// 可以通过修改组件的属性来更新表达式
this.expression = expression;
}
<div *ngFor="let item of items | filter:expression">
{{ item.name }}
</div>
这样,当选中复选框时,ngFor中的表达式将根据复选框的状态进行更新,只显示选中的项。请注意,这里的filter是一个自定义的管道,用于过滤ngFor中的数据。你可以根据实际需求自定义管道或使用其他内置管道。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云