Angular 7-从动态生成的表中删除行

Question

我正在尝试从动态生成的表中删除一行。首先，我尝试使用第三方ngx-file-drop组件上传多个文件。
我正在遍历NgxFileDropEntry类型的文件对象。该对象只有两个属性，称为文件输入和相对路径。但是，在遍历对象时，我可以在html代码中分配selectedDocumentItem和selectedDate，这些时间在调试期间在组件中的运行时可见，但在编译时会抱怨。
我使用了上面的方法，以便当用户单击上载按钮时可以保存记录，因为所有值都可以通过该对象获得。
我需要找到该行的唯一标识符才能将其删除。由于对象没有公开我要添加的属性，因此我现在无法。

html

<div class="upload-table">
    <table id="table1" class="center" >

        <tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i=index"  [attr.id]="item.id">

            <td> <input kendoTextBox [(ngModel)]="item.relativePath" style="width: 350px" /></td>
            <td><kendo-dropdownlist style="width:350px" [(ngModel)]="item.selectedDocumentItem"  [data]="DocumentTypes"  [defaultItem]="defaultItem"
                                    [filterable]="false" textField="Name"  valueField="Id">
            </kendo-dropdownlist></td>
            <td>  <kendo-datepicker style="width: 200px" [format]="'dd MMM, yyyy'" [(ngModel)]="item.selectedDate"></kendo-datepicker></td>
            <button id="remove" (click)="deleteRow(i)">DELETE </button>
        </tr>
        </tbody>
    </table>
</div>

组件

deleteRow(id) {
        for(let i = 0; i < this.files.length; ++i){
            if (this.files[i].id === id) {
                this.files.splice(i,1);
            }
        }
}

这是我单击删除按钮时json的样子

[{"relativePath":"Simplex - Copy - Copy.xlsx","fileEntry":{"name":"Simplex - Copy - Copy.xlsx","isDirectory":false,"isFile":true},"selectedDocumentItem":{"Id":6,"Name":"Constitutional Documents"},"selectedDate":"2019-07-09T23:00:00.000Z"},{"relativePath":"Simplex - Copy (2).xlsx","fileEntry":{"name":"Simplex - Copy (2).xlsx","isDirectory":false,"isFile":true},"selectedDocumentItem":{"Id":10,"Name":"Manager Letters"},"selectedDate":"2019-07-13T23:00:00.000Z"},{"relativePath":"Simplex - Copy.xlsx","fileEntry":{"name":"Simplex - Copy.xlsx","isDirectory":false,"isFile":true},"selectedDocumentItem":{"Id":7,"Name":"Regulation / References"},"selectedDate":"2019-07-30T23:00:00.000Z"}]

屏幕截图

Answer 1

如何通过传入函数从索引中删除表：

<tr *ngFor="let item of files; let index=index"  [attr.id]="item.id">
    ...
    <button id="remove" (click)="deleteRow(index)">DELETE </button>
</tr>

不可变的方式：

deleteRow(index) {
  this.files = this.files.filter((_filter, key) => key !== index);
}

可变方式：

deleteRow(index) {
  this.files.splice(index, 1);
}