如何在角度 5 中动态添加和删除表格行和列？

Question

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

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

 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>