Dans mon projet, j'utilise angular6 avec des dessins matériels angulaires. Dans ma table, je dois ajouter une nouvelle ligne de données dans une table existante sans rafraîchir la table entière. Voici ce que j'ai essayé jusqu'à présent,
émetteur-data.component.ts xxx édition-édition-Data. composant.ts xxx suivi est ma classe de service, xxx mais quand j'essaie de Ajouter de nouvelles données Le résultat est le suivant,
Toutes les données sont parties et l'écran affiche uniquement les données que j'ai ajoutées récemment.
3 Réponses :
Essayez de ne pas créer de nouveau MatTabledTabledAsource sur la mise à jour, mais ajoutez plutôt de nouvelles données à l'existant. Quelque chose comme ceci:
@Indrajithekanayake Pouvez-vous créer un Stackblitz avec l'exemple et revérifier le code, car ces 3 lignes que j'ai envoyées sont correctes. Ne devrait pas être une erreur.
C'est une partie du très grand projet afin qu'il ne puisse pas être montré dans Slackblitz
@Indrajithekanayake Votre éditeur vous montre-t-il où est l'erreur exactement? Pouvez-vous envoyer ce morceau de code?
Mise à jourDatasource (résultat) {this.datasource.data = [... this.datasource.data, résultat]; }
après (résultat) et avant {
@Indrajithekanayake est-ce une méthode distincte dans votre code?
Vous avez une méthode mise à jourDatasource () dans le émetteur-data.component.ts , il suffit de le remplacer par le code que j'ai envoyé
fonctionnalité travaillant mais il y a une exception que j'ai mis à jour ma question s'il vous plaît jeter un coup d'oeil
Pouvez-vous envoyer un exemple de this.datasource.data (couple d'éléments suffirait) et un exemple du résultat ?
Difficile à dire, essayez de vérifier si vous n'appelez pas la méthode Mise à jourDatasource () avant this.datasource.data est défini.
Après avoir demandé à la mise à jour, vous devez demander des données qui ont été mises à jour
updatingDataSource(result) {
this.dataSource = new MatTableDataSource(result);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
requestForNewDataSourceFnc()
}
Merci je vais essayer avec ça si ça marche, je vais offrir ma prime
Ne pas avoir besoin de faire
this.datasource = nouveau MatTabledtaTaSource (résultat); ceci.datasource.paginator = this.paginator; cela.datasource.sort = cela.sort; p> blockQuote>
Utilisez P>
this.dataSource.data.push(result); this.dataSource._updateChangeSubscription();
Merci je vais essayer avec ça si ça marche, je vais offrir ma prime
Wow, une telle réponse que vous le méritez merci beaucoup. réponse très utile
Est-ce que cela.datasource._updatechangeSubescription (); Mettre à jour uniquement les nouvelles données? Ou cela actualise-t-il la table?
Je vais offrir une prime demain
Quelle est la différence entre this.datasource.data = [... this.datasource.data, résultat]; et this.datasource.data.push (résultat); dans ce cas? Pourquoi il n'y a pas d'indéfinie dans le ... PUSH () WAY?
@Indrajithekanayake C'est une API de la table mat, ce qui mettra à jour U'R DataSource lorsque vous effectuez des opérations sur celle-ci comme poussée (), épissure (), etc.
j'ai compris. Merci beaucoup
Tellement de code; Pouvez-vous mettre en évidence où ajoutez de nouveaux éléments à votre source de données?
dans edit-émission-data.component.ts @jeffryhouser
@Indrajithekanayake, pouvez-vous vérifier
this.datasource.data avantthis.datasource.data = [... this.datasource.data, résultat] ?