Angular 6：使用复选框检索 ngFor 列表的元素答案

【问题标题】：Angular 6: retrieve elements of a ngFor list with checkboxesAngular 6：使用复选框检索 ngFor 列表的元素
【发布时间】：2019-07-05 06:16:00
【问题描述】：

我想在 Angular 上使用 ngFor 显示一个数组（我正在使用 Angular 6）。我希望能够通过单击复选框来选择我的一些汽车最后，当我按下按钮时，我会购买选定的汽车。

列表显示正常，复选框也显示，但我真的不知道如何轻松检索选定的汽车。你能帮我吗？我已经尝试了一些我在 StackoverFlow 上找到的示例，但没有成功

我不想触摸只包含 3 个字段（id 品牌和价格）的车型

<thead>
<button type="button" click="buySelectedCars()">BUY</button>
</tr>
<th>car id</th>
<th>car brand</th>
<th>car price</th>
<th> checkbox</th>
<tr>
</thead>
<tbody>
<tr *ngFor="let car of cars">
<td>{{car.id}}</td>
<td>{{car.brand}}</td>
<td>{{car.price}}</td>
<td>
<input type="checkbox" [checked]='car.check'></td>
</td>
</tr>
</tbody>

TS：

buySelectedCars(){
    for (car of cars){
    if car.check{
    this.carService.buyCar(car);
    }
    }
}

【问题讨论】：

标签： angular ngfor

【解决方案1】：

检索用户选中复选框的值。您首先需要唯一标识每个复选框。一种方法是将输入标签的 value 属性设置为 car.id 。从这里我们可以从其事件中提取复选框的值。因此，对于每个更改调用一个方法并传递事件。

在打字稿中，首先检查复选框是否已选中，如果选中则将其推送到 userSelect 列表中。同样，对于用户未选中某些值的情况，我们需要遍历列表以删除该条目

这是针对您的案例的修改代码：

HTML

<thead>
<button type="button" click="buySelectedCars()">BUY</button>
</tr>
<th>car id</th>
<th>car brand</th>
<th>car price</th>
<th> checkbox</th>
<tr>
</thead>
<tbody>
<tr *ngFor="let car of cars; let i = index">
<td>{{car.id}}</td>
<td>{{car.brand}}</td>
<td>{{car.price}}</td>
<td>
<input type="checkbox" value = "{{ car.id }}" (change) = "getUserSelect($event,i)"></td>
</td>
</tr>
</tbody>

userSelect = [];
getUserSelect(ev, index) {
    if(ev.target.checked == true) {
        this.userSelect.push(ev.target.value);
    }
    else {
        // removing any entry if user unchecked any previously selected value
        for(let i = 0;i < userSelect.length; i++) {
            if(userSelect[i] == ev.target.value) {
                this.userSelect.splice(i,1);
            }
        }
    }
 }

【讨论】：

嗨，我已经使用了你的解决方案，效果很好，但我想要一个检查按钮，可以用来检查列表中的所有汽车
我做了但我真的不知道在 SelectAll 上写什么
添加一个选择所有你必须为复选框分配一些唯一的动态ID，如。然后在 selectAll 中，您必须遍历所有记录，使用 const el = document.getElementById() 获取每个复选框，然后将其选中属性设置为 TRUE

【解决方案2】：

最简单的方法是使用响应式表单，例如使用 Angular 材质 mat-selection-list

<mat-selection-list formControlName="cars">
  <mat-checkbox *ngFor="let car of cars" labelPosition="after"
              [value]="car.id">
  </mat-checkbox>
</mat-selection-list>

然后在 TS 上你可以使用提取数据

this.form.get('cars').value

【讨论】：

【解决方案3】：

你可以维护一个检查项的数组。

例如：

html:

<td>
<input type="checkbox" [checked]='cars.indexOf(car) > -1' (change)="checkChanged(car)"></td>
</td>

ts：

//declare array

const cars = [];

//function
checkChanged(car)
{
  const checkedCar = this.cars.find(c => c.id === car.id);
  if(checkedCar)
  {
    this.cars.splice(this.cars.indexOf(checkedCar), 1);
  }
  else
  {
    this.cars.push(car);
  }
}

【讨论】：