angular - 如何动态添加和删除 Angular 5 中的表行和列？

Question

Below my component and html files. In below html code I have check boxes and table. 

初始页面动态加载我正在显示两个选中的复选框和两个复选框列名称属性我正在添加到表列。如果我选中未选中的复选框，则它被选中并且动态地将该复选框的列名称属性添加到表列中。如果我取消选中任何复选框，我就可以从表中删除该列名。我的要求:我有表数据:any = []。当我选中任何复选框时，相同列名的表数据将添加到表中，如果我取消选中该复选框，相同列名的表数据将动态删除。

 component.ts
    import { Component, OnInit, Input, ViewChild } from '@angular/core';
    import { MatTableDataSource, MatSort } from '@angular/material';
    import { Sort } from '@angular/material';

    @Component({
      selector: 'export-results',
      templateUrl: './export-results.component.html',
      styleUrls: ['./export-results.component.scss']
    })
    export class ExportResultsComponent implements OnInit {
      @Input() getExportResults: any;
      inputCheckBox: any = [];
      callCheckBox: any = [];
      tableHeader: any = [];
      tabledata: any = [];

      constructor() {
        this.inputCheckBox = [
          {
            key: 1,
            value: 'name',
            defaultChecked: true,
            columnName: 'input.name',
          },
          {
            key: 2,
            value: 'path',
            defaultChecked: false,
            columnName: 'input.path',
          }
        ]

        this.callCheckBox = [
          {
            key: 3,
            value: 'name',
            defaultChecked: true,
            columnName: 'call.name',
          },
          {
            key: 4,
            value: 'rank',
            defaultChecked: true,
            columnName: 'call.rank',
          },
        ]

      }
      ngOnInit() {
        this.tableHeader = [
          {
            key: 1,
            value: 'inputname',
            defaultChecked: true,
            columnName: 'input.name',
          },
          {
            key: 2,
            value: 'path',
            defaultChecked: false,
            columnName: 'input.path',
          },
          {
            key: 4,
            value: 'rank',
            defaultChecked: true,
            columnName: 'call.rank',
          },

        ];
        this.tabledata = [
          {
            input_name: 'abc1',
            input_path: 'path2',
            call_name: 'aaa',
          },
          {
            input_name: 'abc1',
            input_path: 'path2',
            call_name: 'aaa',
          }]
      }
      onSelected(input) {

        let obj = this.tableHeader.find(x => x.columnName === input.columnName);
        let index = this.tableHeader.indexOf(obj);
        if (index > -1) {
          this.tableHeader.splice(index, 1);
        } else {
          this.tableHeader.push(input);
        }
        this.tableHeader.sort(function (a, b) {
          return a.key - b.key
        })
      }
    }

component.html

    <div >
      <!-- Select columns section-->
      <div>
        <div>
          <label class="select-columns__label-heading">Select Columns</label>
          <div>
            <button class="save-button"></button>
          </div>
        </div>
        <!-- Select columns checkboxes -->
        <div>
          <div class="select-columns__check-list">
            <h4>Input</h4>
            <div *ngFor="let input of inputCheckBox" class="mat-checkbox">
              <mat-checkbox (change)="onSelected(input)" type="checkbox" [(checked)]="input.defaultChecked" name="inputCheckBox1">{{input.value}}
              </mat-checkbox>
            </div>
          </div>
          <div class="select-columns__check-list">
            <h4>Call</h4>
            <div *ngFor="let call of callCheckBox" class="mat-checkbox">
              <mat-checkbox (change)="onSelected(call)" type="checkbox" [(checked)]="call.defaultChecked" name="inputCheckBox">{{call.value}}
              </mat-checkbox>
            </div>
          </div>
        </div>
      </div>
      <!-- table section-->
      <div class="select-columns__table">
        <table matSort class="export-table">
          <tr>
            <th *ngFor="let headerName of tableHeader">{{headerName.columnName}}</th>
          </tr>
          <tr>
          <td>

          </td>
          </tr>
        </table>
      </div>
    </div>

Answer 1

我认为这会解决你的行删除问题

 //inside your ts
 
 private fieldArray: Array<any> = [];
    private newAttribute: any = {};

    ngOnInit(){

    }

    addFieldValue() {
        this.fieldArray.push(this.newAttribute)
        this.newAttribute = {};

        console.log(this.fieldArray);
    }

    deleteFieldValue(index) {
        this.fieldArray.splice(index, 1);
    }

  <tbody>
        <tr *ngFor="let field of fieldArray}; let i = index">
            <td>{{field.code}}</td>
            <td>{{field.name}}</td>
            <td>{{field.price}}</td>
            <td>
                <button class="btn btn-default"  type="button" (click)="deleteFieldValue(i)">Delete</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
            </td>
            <td>
                <input class="form-control" type="number" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice" />
            </td>
            <td>
                <button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
            </td>
        </tr>
    </tbody>