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

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

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

component.ts
从“@angular/core”导入{Component，OnInit，Input，ViewChild}；
从“@angular/material”导入{MatTableDataSource，MatSort}；
从“@angular/material”导入{Sort}；
@组成部分({
选择器：“导出结果”，
templateUrl:'./export results.component.html'，
样式URL:['./导出结果.component.scss']
})
export类ExportResultComponent在NIT上实现{
@Input（）getExportResults：任意；
inputCheckBox:any=[]；
callCheckBox:any=[]；
tableHeader:any=[]；
tabledata:any=[]；
构造函数（）{
this.inputCheckBox=[
{
重点:1,，
值：“名称”，
默认选中：正确，
columnName:'input.name'，
},
{
重点:二,，
值：“路径”，
defaultChecked:false，
columnName:'input.path'，
}
]
this.callCheckBox=[
{
重点:三,，
值：“名称”，
默认选中：正确，
columnName:'call.name'，
},
{
重点:四,，
值：“秩”，
默认选中：正确，
columnName:'call.rank'，
},
]
}
恩戈尼尼特（）{
this.tableHeader=[
{
重点:1,，
值：“inputname”，
默认选中：正确，
columnName:'input.name'，
},
{
重点:二,，
值：“路径”，
defaultChecked:false，
columnName:'input.path'，
},
{
重点:四,，
值：“秩”，
默认选中：正确，
columnName:'call.rank'，
},
];
此.tabledata=[
{
输入_名称：“abc1”，
输入路径：“路径2”，
叫你的名字：“aaa”，
},
{
输入_名称：“abc1”，
输入路径：“路径2”，
叫你的名字：“aaa”，
}]
}
onSelected（输入）{
让obj=this.tableHeader.find（x=>x.columnName===input.columnName）；
让index=this.tableHeader.indexOf（obj）；
如果（索引>-1）{
此.tableHeader.splice（索引1）；
}否则{
这个.tableHeader.push（输入）；
}
this.tableHeader.sort（函数（a，b）{
返回a.key-b.key
})
}
}
component.html
选择列
输入
{{input.value}
呼叫
{{call.value}}
{{headerName.columnName}

我认为这将解决您的行删除问题

//在您的ts中
专用字段数组：数组=[]；
私有newAttribute:any={}；
恩戈尼尼特（）{
}
addFieldValue（）{
this.fieldArray.push（this.newAttribute）
this.newAttribute={}；
console.log（this.fieldArray）；
}
deleteFieldValue（索引）{
这个.fieldArray.splice（索引，1）；
}

{{field.code}
{{field.name}
{{field.price}
删除
添加

您的标签搞错了-

angularjs

用于Angular1.x版！

 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>