Je tente de créer un composant de table dans lequel un utilisateur peut ajouter un point de terminaison de repos à charger dans les données. Les données sont censées être une gamme d'objets arbitraires, donc aucun schéma strict n'est nécessairement possible ici.
Le problème est que je ne peux pas obtenir la table et ce paginateur d'attendre de resserrer jusqu'à ce que j'ai fait une demande sur le reste. point final. J'ai une version qui obtient la pagination fonctionne, mais le paginateur (et la table vide) apparaissent toujours avant que les données ne soient chargées. P>
J'ai essayé d'utiliser aprèsViewChecked, ainsi que de différents endroits d'initialisation du paginateur et table. p>
Stackblitz Échantillon ici. Notez que vous ne le faites pas doivent entrer un point d'extrémité valide dans le modal, car il récupère du mannequin. J'ai laissé le modal aussi proche de mon état par défaut que possible. P>
Le fichier composant.ts Fichier: p> et le fichier html: p > lorsque je tente d'ajouter un * ngif = "datasource.data.length" code> au tableau code> et et Paginator Mat-Paginator Code>, soit le paginateur est affiché mais non "lié" sur la table ou le tableau apparaît sans données, et je reçois l'erreur suivante: P> TypeError: Cannot read property 'renderRows' of undefined
3 Réponses :
Ajouter une propriété à votre composant Mettez à jour votre méthode à: et votre HTML à: < Pré> xxx isinitialisé
Pour baliser cette réponse, vous pouvez également utiliser le tuyau ASYNC pour obtenir un résultat similaire
Malheureusement, cela me donne le même résultat qu'avant;
Si je le fais, ajoutez, ajoutez
Il semble qu'il y ait un certain nombre de problèmes ici. Le moyen le plus simple de fournir une assistance serait si vous pouviez reproduire ce problème dans un projet Stackblitz et relier ce projet ici.
@peinearyDéveloppement, bonne suggestion, j'ai ajouté un exemple de projet au poste. Il peut également être trouvé ici.
TypeError: Impossible de lire la propriété 'Renderrows' de indéfini et d'une table vide.
modifiéTectorcref.detectchanges () appel à droite après la mise à jour this.isInitialisé Cependant, je reçois un résultat légèrement meilleur: la table charge, avec le paginateur. , mais ils ne sont pas "liés", c'est-à-dire que le paginateur ne fait rien et cela montre simplement la table complète.
J'ai trouvé un moyen de résoudre ce problème, mais je ne dirais pas qu'il aborde le problème de la racine; Cachez simplement le conteneur pour la table et le paginateur avant que les données soient prêtes.
Premier, j'ai changé la ligne 2 dans le HTML à ceci: P>
public getTableVisibleStyle() {
let style: string = 'none';
if (this.tableVisibility) {
style = 'block';
}
// have to do this to get past overzealous security
return this.sanitizer.bypassSecurityTrustStyle(style);
}
Vous pouvez faire ce qui suit pour accomplir cela.
Ne pas initialiser votre sur le puis initialiser la variable lorsque les données sont reçues. pour le masquer à nouveau, DataSource variable. sur le Table-conteneur Vous pouvez * ngif = "DataSource" null la variable