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方法，但我不知道如何避免表中的重复字段（array-> productSelected）。我当时想搜索数组，是否选择了产品只是为了删除它，或者类似的东西。

我希望我能打得足够清楚。谢谢！

Answer 1

如果复选框的值为true，并且选定的产品中不存在该产品，则为该产品的复选框的值；然后，如果复选框为false并且该产品存在于选定的产品列表中，则将其推送；否则，可以使用拼接

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

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

3 个答案: