L'actualisation des données de la table datatables.net dans Angular 7 conserve une copie des anciennes données du premier chargement de la table

Je l'ai essayé et ce comportement est très étrange, il revient par défaut aux valeurs d'origine. Ce n'est pas un problème avec votre code mais plutôt avec une bibliothèque angulaire datable.

Pour l'instant rétrogradez vers angular-datatables@6.0.0 en utilisant

npm install --save angular-datatables@6.0.0 ou yarn add angular-datatables@6.0.0

Je l'ai essayé et cela fonctionne très bien.

Vous devez d'abord détruire la table et effectuer un nouveau rendu. Vous pouvez consulter l'article ici . Un extrait de code si le lien est désactivé à l'avenir.

rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  // Destroy the table first
  dtInstance.destroy();
  // Call the dtTrigger to rerender again
  this.dtTrigger.next();
});
}

Une autre solution est comme indiqué ici

Faites-moi savoir si cette solution fonctionne ou si vous avez des questions.

J'ai eu le même problème. L'appel du dtTrigger après un rappel de ma méthode de mise à jour des données l'a résolu:

rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => { 

    // Destroy the table first
    dtInstance.destroy();

    //reload your data
    this.reloadDataMethod(()=>{

       // Call the dtTrigger to rerender **after callback**
       this.dtTrigger.next();

    })
  });
 }

J'ai fait un exemple de comment cela peut bien fonctionner lorsque vous essayez de faire un rendu sur angular-datatables . Cela fonctionne sur Angular 9. Vous devez utiliser ChangeDetectorRef car classe de base qui fournit la fonctionnalité de détection des modifications. Une arborescence de détection des modifications rassemble toutes les vues dont les modifications doivent être vérifiées. Utilisez les méthodes pour ajouter et supprimer des vues de l'arborescence, lancer la détection des modifications et marquer explicitement les vues comme sales, ce qui signifie qu'elles ont été modifiées et doivent être rendues à nouveau. Découvrez-le: https://angular.io/api/core/ChangeDetectorRef

stuff.html

@Component({
    selector: 'app-stuff',
    templateUrl: './stuff.component.html'
})
export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
    @ViewChild(DataTableDirective) datatableElement: DataTableDirective;

    public dtOptions: DataTables.Settings = {};
    public dtTrigger: Subject<any> = new Subject();

    constructor(
       private readonly chRef: ChangeDetectorRef,
       private readonly stuffService: StuffService
    ) { }

    ngOnInit() {
        this.stuffService.list().subscribe(response => {
            this.myData = response;
            //put this line before call dtTrigger
            this.chRef.detectChanges();
            this.dtTrigger.next();
        });
    }

    ngOnDestroy() {
        this.dtTrigger.unsubscribe();
    }

    ngAfterViewInit() {
        this.dtTrigger.next();
    }

    public rerender() {
        this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
            dtInstance.destroy();

            this.stuffService.list().subscribe(response => {
                this.myData = response;
                this.dtTrigger.next();
            });
        });
    }
}

stuff.ts^

<table 
    datatable
    *ngIf="myData.length" 
    [dtOptions]="dtOptions"
    [dtTrigger]="dtTrigger"
    class="table table-bordered table-striped"
>
    <thead>
        <tr>
            <th> Stuff1 </th>
            <th> Stuff2 </th>
            <th> Stuff3 </th>
            <th> Stuff4 </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of myData">
            <td> {{ data.stuff1 }} </td>
            <td> {{ data.stuff2 }} </td>
            <td> {{ data.stuff3 }} </td>
            <td> {{ data.stuff4 }} °C </td>
        </tr>
    </tbody>
</table>

p >