typescript - hur man dynamiskt lägger till och tar bort tabellrad och kolumn i angular 5?

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

Initial sidladdning dynamiskt visar jag två kryssrutor som är markerade och båda kryssrutornas kolumnnamnsegenskap lägger jag till i tabellkolumnen. Om jag markerar den avmarkerade kryssrutan blir den markerad och dynamiskt läggs kolumnnamnsegenskapen för den kryssrutan till tabellkolumnen. Om jag avmarkerar någon kryssruta kan jag ta bort det kolumnnamnet från tabellen. Mitt krav: Jag har tabledata: any=[]. När jag markerar någon kryssruta kommer samma kolumnnamn tabelldata att läggas till i tabellen och om jag avmarkerar kryssrutan kommer samma kolumnnamn tabelldata att tas bort dynamiskt.

 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>

Svar #1

Jag tror att detta kommer att fungera för ditt problem med att ta bort rader

 //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>