テンプレートは、モデルが

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を使用することができます。minimableかつ検証可能である

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

Plunker： http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

Answer 2

使用project.files

HTML

ここで奇妙な挙動を示す2つのスクリーンショットです

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