Не удается обновить таблицу после удаления элемента в угловых

Question

Я пытаюсь сделать приложение CRUD, используя угловую и пружинную загрузку.При попытке удалить элемент таблица не может быть обновлена.Вот мой код:

Contrat.component.ts:

<table class="table ">
    <thead>
        <th>ID</th>
        <th> TYPE</th>
        <th>MISSION</th>
        <th> <img src="assets/plus.png"> </th>
    </thead>
    <tbody>
        <tr *ngFor="let contrat of contrats ">
            <td>{{contrat.id}}</td>
            <td>{{contrat.type}}</td>
            <td>{{contrat.name_mission}}</td>
            <td><button class="btn btn-danger" (click)="deleteContrat(contrat)">Delete</button>
                <button class="btn btn-primary">Edit</button></td>
        </tr>
    </tbody>
</table>

Contrat.component.ts:

deleteContrat(contrat) {
    this.contratService.deleteContrat(contrat.id).subscribe((data) => {
        this.contrats = this.contrats.filter(u => u !== contrat);
        this.fetchData();
    }, (error) => {});
}

fetchData() {
    this.contratService.getContrats().subscribe(data => {
        this.contrats = data;
    });
}

Служба удаления работает, но таблица может 't автоматически обновляется.

Answer 1

спасибо, ребята, я решил это, поставив this.fetchData ();вне подписки ()

Answer 2

Несмотря на то, что данные изменены, таблица будет содержать предыдущие данные.Поэтому для повторного рендеринга новых данных уловка заключается в использовании директивы * ngIF с логическим значением.Подтвердите удаление, просто переключите логическое значение на false и при получении просто установите логическое значение на true.

  <div *ngIf="isAvailable">
  <table class="table table-hover table-bordered">

Это будет работать.

Answer 3

Вы не удаляете данные.Ну, вы фильтруете и заполняете одни и те же данные.так что вам просто нужно обновить массив Contrats и все.Нет необходимости снова вызывать данные для выборки.

deleteContrat(contrat)
{
this.contratService.deleteContrat(contrat.id).subscribe( (data)=>{
  this.contrats = this.contrats.filter(u => u.id !== contrat.id);
},(error)=>{
} );
}

Answer 4

Ну, это должно помочь,

fetchData() {
  this.contrats = null; //or create new contrats object
  this.contratService.getContrats().subscribe(data =>{
  this.contrats = data;
});

И добавить это на стороне шаблона,

<table class="table" *ngIf="contrats">
.
.
.

При таком подходе вы уверены, что после удаления записи из контекста,новые данные актуальны.

Answer 5

Нет необходимости перезагружать данные.Вместо этого удалите удаленный элемент из вашего контрата (я полагаю, это должен быть контракт?) Массив следующим образом:

this.contratService.deleteContrat(contrat.id).subscribe( (data)=>{
  const deletedContrat = this.contrats.find(x => x.id === contrat.id);
  this.contrats.splice(this.contrats.indexOf(deletedContrat), 1);
}