在HTML文件中添加一个带有ngModel指令的复选框,并添加一个单击事件(change),该事件将触发一个方法,该方法将真实的值添加到数组中。
Checkbox Label
在组件.ts文件中,声明一个名为selectedItems的空数组,并编写addToSelectedItems()方法,该方法将需要添加到该数组中的真实值进行处理。
import { Component } from '@angular/core';
@Component({
selector: 'app-checkbox-example',
templateUrl: './checkbox-example.component.html',
styleUrls: ['./checkbox-example.component.css']
})
export class CheckboxExampleComponent {
selectedItems: Array = [];
addToSelectedItems() {
if (this.isChecked) {
this.selectedItems.push('valueToAdd');
} else {
const index = this.selectedItems.indexOf('valueToAdd');
if (index > -1) {
this.selectedItems.splice(index, 1);
}
}
}
}
这样,每次单击复选框时,将会调用addToSelectedItems()方法,在selectedItems数组中添加或删除true值。