Question

我遍历包含对象的数组：

<tr *ngFor="let file of files | orderBy: 'id':ascending:true | paginate: {id: 'FilePagination',itemsPerPage: 20, currentPage: p}">
    <th [innerHTML]="project.files.indexOf(file)+1" scope="row"></th>
    <td><a href="{{file.uri + token}}" target="_blank"><i class="fa"
                                                          [class.fa-file-audio-o]="types.audio.includes(file.type)"
                                                          [class.fa-file-pdf-o]="types.document.includes(file.type)"></i>{{"
        " + file.fullName}}</a>
    </td>
    <td>{{file.size}}</td>
    <td>{{file.timestamp | timeCalc}}</td>
    <td *ngIf="adminMode">
        <button type="button" (click)="deleteFile(file)"
                class="fa fa-trash-o btn btn-link p-0" title="Löschen"></button>
    </td>
</tr>

调用deleteFile方法：

deleteFile(file: File) {
    this.loading = true;
    this.fileService.deleteFile(file).subscribe(
        message => this.information = message,
        error => {
            this.loading = false;
            this.errorMessage = error;
        },
        () => {
            this.files.splice(this.files.indexOf(file), 1);
            this.loading = false;
        }
    )
}

订阅呼叫完成后，删除的文件不会从视图中删除。尽管如此，它仍然从数组中删除，因为数组中所有文件的索引都发生了变化。以下是两个显示奇怪行为的屏幕截图：

删除前： beforeDelte

删除后： afterDelete

Answer 1

您可以使用filter排除对象属性所需的元素并重新分配：

this.files = this.files.filter(file => file.id !== fileToRemove.id);

可以最小化和可验证的Plunker：http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

Answer 2

使用project.files

<强> HTML

<tr *ngFor="let file of project.files | orderBy: 'id':ascending:true | paginate: {id: 'FilePagination',itemsPerPage: 20, currentPage: p};">
    <th [innerHTML]="project.files.indexOf(file)+1" scope="row"></th>
    <td><a href="{{file.uri + token}}" target="_blank"><i class="fa"
                                                          [class.fa-file-audio-o]="types.audio.includes(file.type)"
                                                          [class.fa-file-pdf-o]="types.document.includes(file.type)"></i>{{"
        " + file.fullName}}</a>
    </td>
    <td>{{file.size}}</td>
    <td>{{file.timestamp | timeCalc}}</td>
    <td *ngIf="adminMode">
        <button type="button" (click)="deleteFile(file)"
                class="fa fa-trash-o btn btn-link p-0" title="Löschen"></button>
    </td>
</tr>

删除功能：

deleteFile(file: File) {
    this.loading = true;
    this.fileService.deleteFile(file).subscribe(
        message => this.information = message,
        error => {
            this.loading = false;
            this.errorMessage = error;
        },
        () => {
            this.project.files.splice(file, 1);
            this.loading = false;
        }
    )
}

模型更改后模板未更新

2 个答案: