模板不更新后模型改变

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; 
     } 
    ) 
} 

的订阅呼叫完成后，被删除的文件不会被删除从视图。尽管如此，它肯定会从数组中移除，因为数组中所有文件的索引都会改变。这里有两张截图显示了怪异的行为：

删除之前：

---

删除后：

Answer 1

可以使用filter通过一个对象的属性，以排除你想要的元素并重新分配：

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

Plunker这是minimable和可核查： 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; 
     } 
    ) 
}