json - ngFor Angular のさまざまな要素の表示/非表示

Question

ngFor でデータを表示するテーブルがあります。要素を削除するとき、それを非表示にしたい。デフォルトではfalseであるレコードコンポーネントで変数を作成する必要があると考えましたが、hide:boolean削除ボタンをクリックするとtrueに変わります。テーブルでこの変数を「キャッチ」する方法がわかりません。

<table>
  <thead>
    <tr>
      <th>
        Id
      </th>
      <th> 
        Name
      </th>
      <th>
        Surname
      </th>
      <th>
        Actions
      </th>
    </tr>
  </thead>
  <tbody>
    <tr sl-record *ngFor="let recordElement of records" [record]="recordElement" [hidden]="recordElement.hide"></tr>
  </tbody>
</table>

そして私のレコードコンポーネント:

<td>{{record.id}}</td>
<td>{{record.name}}</td>
<td>{{record.surname}}</td>
<td>
  <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
    <button type="button" class="btn btn-danger" (click)="removeRecord(record.id)">
      <i class="fa fa-trash-o" aria-hidden="true"></i> Remove
    </button>
  </div>
</td>

私は何を間違っていますか？json-server で接続された json ファイルにデータがあります。機能でレコードを削除しhttp.delete()ます。ファイルから削除されますが、テーブルは自動的にリロードされません。

記録コンポーネント、removeRecod 関数:

removeRecord(id) {
    var url = this.data_url + "/" + id;
    this.http.delete(url).subscribe();
    this.hide = true;
  }