データが変更されたときに角度2のテンプレートを更新できません

Question

データをテーブルに挿入するフォームがあります。テーブルからデータを削除すると、データは削除されますが、テーブルの行は削除されません。 データは双方向バインディングなので、データは削除されますが、html構造は同じままです。

コンポーネント

export class HomeComponent implements OnInit { 

studentform = new FormGroup({ 
    id: new FormControl(), 
    name: new FormControl(), 
    address: new FormControl() 
}); 

student: Student[]=[]; 
std: Student= new Student(); 
constructor(public homeService: HomeService){ } 

OnInit(){ 
    this.getData(); 
} 

getData(){ 
    this.student = this.homeService.GetData(); 
} 

onEdit(id:number){  
    console.log("Edit:" + id); 
} 

onDelete(id:number){ 
    this.homeService.delete(id); 
    this.getData();  
} 

Save(model:Student){  
    this.homeService.SaveData(model);   
    this.studentform.reset(); 
    this.getData(); 

} 

} 

サービス

div class="col-md-6"> 

<h5> Lists </h5> 

<table> 
    <th>ID </th> 
    <th>Name </th> 
    <th>Address </th> 
    <th>Edit </th> 
    <th>Delete </th> 

    <tr *ngFor="let x of student">     
     <td> {{ x.id }} </td> 
     <td> {{ x.name }} </td> 
     <td> {{ x.address }} </td> 
     <td (click)="onEdit(x.id)"> Edit </td> 
     <td (click)="onDelete(x.id)"> Delete </td>   
    </tr> 

</table>   

は私がHTML（テンプレート）のデータ変更を更新ヘルプ

@Injectable() 
export class HomeService{ 

student:Student[]=[]; 

SaveData(model:Student){ 
    this.student.push(model); 
} 

GetData(){ 
return this.student; 
} 

delete(id:number){ 
    for(var i=0;i<this.student.length;i++){ 
     if(this.student[i].id==id){ 
      delete this.student[i] 
     } 
    } 
} 

} 

テンプレート。私は、テーブルをクリックした後

これが結果です：データがなくなっていますが、行は

Answer 1

あなたが実際にオブジェクトを削除しているが、それは参照だがプライマリ配列に残ります。代わりにこれを試してみてください：

delete(id:number){ 
    for(var i=0;i<this.student.length;i++){ 
     if(this.student[i].id==id){ 
      this.student.splice(i, 1); //delete this.student[i] 
      break; 
     } 
    } 
} 

Answer 2

delete this.student[i]は、このような状況では、配列から要素を削除する正しい方法ではないまま。 splice()を使用する必要があります。

this.student.splice(i, 1); 

また、テンプレートにオブジェクトフィールドを表示するときは真実のチェックを行う必要があります。それ以外の場合は、そのようなエラーが発生します。通常、安全運行のオペレーター（?）がこのトリックを行います。

例：

<td> {{ x?.id }} </td>