Question

我有一个简单的对象数组来显示一些像这样的复选框：

excludeRecords = [
    {label: 'Full Mailing Address', value:'fullMailing', checked:false},
    {label: 'Full Office Address', value:'fullOffice', checked:false},
    {label: 'Email Address', value:'emailAddress', checked:false},
    {label: 'Phone #', value:'Phone #', checked: false},
];
get selectedRecords() {
    return this.excludeRecords.filter(opt=>opt.checked).map(opt=>opt.value);
}

我正在HTML模板中输出它们，如下所示：

<div class="horizontalOptions">
    <label 
    class="horizontalOption"
    *ngFor="let choice of excludeRecords"
    >
        <input type="checkbox"
        [value]="choice.value"
        [(ngModel)]="choice.checked"
        >
        {{choice.label}}
    </label>
</div>

我不确定如何访问get selectedRecords()部分。

我试过了：

{{excludeRecords.selectedRecords()}}

我不认为这是正确的语法，我想在模板和component.ts文件中访问它。

Answer 1

你可以*ngFor="let choice of selectedRecords，因为它的吸引力意味着它是一个属性，你不需要()，它不是一个功能。< / p>

Answer 2

您可以将其存储在另一个变量中：

myselectedRecords : any[];
get selectedRecords() {
    this.myselectedRecords = this.excludeRecords.filter(opt=>opt.checked).map(opt=>opt.value);
}

并在模板上使用此变量：

<label 
    class="horizontalOption"
    *ngFor="let choice of myselectedRecords"
    >

或制作服务组件来处理数组;无论如何，你必须将它存储在组件的变量中。

Angular2将变量复选框的循环列表绑定

2 个答案: