如何从选择列表和复选框填充对象数组并将此数组使用到表中

Question

我想创建一个对象数组并将这个数组使用到一个表中。 该数组将从列表和一些复选框中接收数据。 主要问题是，如果用户从列表中选择另一个产品，该表只会从该数组中添加新产品，但旧产品将保留在表中。

products = [
{code: '123', name: 'product1'},
{code: '321', name: 'product2}'
]

<select formControlName="modelPDC" (click)="selectProduct()">
      <option *ngFor="let prod of this.products" 
      [value]="prod.code">{{ prod.name }}</option>
</select>

<tr>
        <td>{{ productSelected.name }}</td>
        <td>{{  productSelected.code  }}</td>
</tr>

//I will use *ngFor to populate the table.
//The productSelected will be the array filled with the data selected in 
//the list and others check boxes.

我知道如何填充数组，我将使用 .push 方法，但我不知道如何避免表中的重复字段（数组 - > productSelected）。 我想搜索数组，如果选择产品只是为了删除它，或者类似的东西。

我希望我的战争足够清楚..谢谢！

Answer 1

如果复选框值为真，并且所选产品中不存在产品，则检查是产品的复选框值，如果检查为假并且产品存在于所选产品列表中，则将其推入其他位置，您可以使用 splice 将其删除

  setToArray(prod, check){
      if(!check && selectedProd.includes(prod)) {
         selectedProd.splice(selectedProd.indexOf(prod),1)
       }
      else if(check && !selectedProd.includes(prod)){
       selectedProd.push(prod);
    }
    }

Answer 2

试试这个例子

**In Ts file**

import { Component } from '@angular/core';

export interface Food {
  value: string;
  viewValue: string;
}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];
  selectedItems: any = [];

  getArray() {
    let tempArray = [];
    for (let i = 0; i < this.foods.length; i++) {
      if (this.selectedItems.indexOf(this.foods[i].value) == -1) {
        tempArray.push(this.foods[i]);
      }
    }
    return tempArray;
  }

  selectionPush(data) {
    if (this.selectedItems.indexOf(data.value) == -1) {
      this.selectedItems.push(data.value);
    }
  }
  remove(data) {
     let tempArray = [];
    for (let i = 0; i < this.selectedItems.length; i++) {
      if (this.selectedItems[i] != data) {
        tempArray.push(this.selectedItems[i]);
      }
    }
    this.selectedItems = tempArray;
  }
}

在 HTML 文件中

<mat-form-field>
  <mat-select placeholder="Favorite food" (selectionChange)="selectionPush($event)">
    <mat-option *ngFor="let food of getArray()" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<br/>
<mat-checkbox [checked]="true" (change)="remove(items)" *ngFor="let items of selectedItems">{{items}}</mat-checkbox>

Answer 3

我不确定在什么条件下你想从表中删除一个“旧”行，但是如果你在创建时给每一行一个 id（或该行唯一的类），那么只要这些条件发生，你就可以做类似的事情：

let yuckyRow = document.querySelector("#rowId");
document.querySelector("#myTable").removeChild(yuckyRow);