Question

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

列表显示算法，复选框也显示算法，但是我真的不知道如何轻松地检索选定的汽车。你能帮我吗？我尝试了一些在StackoverFlow上发现的示例，但没有成功

我不想触摸仅包含3个字段（标识品牌和价格）的汽车模型

<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);
    }
    }
}

Answer 1

您可以维护一系列检查项目。

例如：

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);
  }
}

Answer 2

最简单的方法是使用反应形式，例如Angular材质的材料选择列表

<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

Answer 3

检索用户选择的复选框的值。您首先需要唯一地标识每个复选框。一种方法是将输入标签的 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>

TS

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);
            }
        }
    }
 }

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

3 个答案: