Question

我将首选项列表显示为复选框，问题出现在绑定部分，我想要一个已检查的ID列表。我尝试谁不工作：

<div class="checkbox" *ngFor="let preference of preferences">
<label><input type="checkbox" value="{{preference.id}}" (change)="preferencesStates[i]=$event.target.value">{{preference.label}}</label>
</div>

这就是我带来偏好的方式：

this.reservationService.getPreferences().subscribe(preferences => {
  if (preferences) {
    JSON.parse(preferences.body).forEach(element => {
      this.preferences.push(element);
    });
  }
});

Answer 1

在(change)事件中，您可以绑定像这样的函数 -

(change)="getInput($event)"

我也希望传递索引。

现在在您的组件类中添加以下代码：

public resArray: any[] = [];  //for storing the checked ids

getInput(event: any,index:number) {
   if(event.target.checked){
      this.resArray.push(event.target.value);
    }else{
      this.resArray.splice(index,1);
    }
  }

请注意，您同时获得checked和unchecked条件。

现在resArray将包含已检查的所有ID。确保传递索引。因此，您的模板代码将如下所示 -

<div class="checkbox" *ngFor="let preference of preferences;let i=index">
<label><input type="checkbox" value="{{preference.id}}" (change)="getInput($event, i)">{{preference.label}}</label>
</div>

Answer 2

使用此

更改您的代码

<div class="checkbox" *ngFor="let preference of preferences; let i = index;">
<label><input type="checkbox" value="{{preference.id}}" (change)="preferencesStates[i]=$event.target.value">{{preference.label}}</label>
</div>

此i未在任何地方定义，preferencesStates[i]

另一种解决方案：

<div class="checkbox" *ngFor="let preference of preferences; let i = index;">
<label><input type="checkbox" value="{{preference.id}}" (change)="preferencesStates[preference.id]=$event.target.checked">{{preference.label}}</label>
</div>

在组件中将其声明为preferencesStates:any;，这将为您提供所有具有id的preferencesStates列表，检查为true并取消选中为false。

将动态选中的复选框值添加到列表中

2 个答案: