Le remplissage de la table à l'aide de 2 différents *ngFor

Ci-dessous mon tableau d'objets JSON:

{
  "tagFrequency": [
    {
      "value": "aenean",
      "count": 1,
      "tagId": 251
    },
    {
      "value": "At",
      "count": 1,
      "tagId": 249
    },
    {
      "value": "faucibus",
      "count": 1,
      "tagId": 251
    },
    {
      "value": "ipsum",
      "count": 1,
      "tagId": 251
    },
    {
      "value": "lobortis",
      "count": 1,
      "tagId": 194
    },
    {
      "value": "molestie",
      "count": 1,
      "tagId": 251
    },
    {
      "value": "unde tempor, interdum ut orci metus vel morbi lorem. Et arcu sed wisi urna sit egestas fringilla, at erat. Dolor nunc.",
      "count": 1,
      "tagId": 199
    },
    {
      "value": "Vestibulum",
      "count": 1,
      "tagId": 251
    }
  ]
}

Je veux afficher ces caractéristiques à savoir. valeur, le comte et la tagName(qui est pris à l'aide de tagId) dans un tableau. Pour les deux premiers attributs que je suis en utilisant ngFor. Mais, je veux aussi imprimer tagName qui, j'en suis arriver à l'aide de tagId et de les stocker dans les noms d'étiquette de tableau. Voici mon code de composant:

frequencies: any;
tagNames: string[] = [];

ngOnInit() {
    if (this.route.snapshot.url[0].path === 'tag-frequency') {
      let topicId = +this.route.snapshot.params['id'];

      this.tagService.getTagFrequency(topicId)
        .then(
            (response: any) => {
          this.frequencies = response.json().tagFrequency
          for(let tagFrequency of this.frequencies) {
            this.getTagName(tagFrequency.tagId)
          }
        }
        )
        .catch(
            (error: any) => console.error(error)
        )
    }
}

  getTagName(tagId: number): string {
    return this.tagService.getTag(tagId)
    .then(
        (response: any) => {
          this.tagNames.push(response.name)
        }
    )
    .catch(
      (error: any) => {
        console.error(error)
      }
    )
  }

Et c'est de cette façon que je suis en train de les imprimer sur l'INTERFACE utilisateur:

<table>
  <thead>
    <tr>
      <th>{{ 'word' }}</th>
      <th>{{ 'tag-name' }}</th>
      <th>{{ 'frequency' }}</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
      <ng-container *ngFor="let name of tagNames">
        <tr *ngFor="let frequency of frequencies; let i=index">
          <td>{{ frequency.value }}</td>
          <td>{{ name }}</td>
          <td>{{ frequency.count }}</td>
        </tr>
      </ng-container>
  </tbody>
</table>

Mais je suis arriver [object object] dans la colonne tag-name. Quelqu'un peut-il m'aider à résoudre ce problème?

J'ai essayé d'utiliser gn-conteneur comme ci-dessus, mais le résultat ressemble à ceci sur l'INTERFACE utilisateur:
Le remplissage de la table à l'aide de 2 différents *ngFor

Qui est faux. J'ai besoin de seulement 3 premières lignes avec une balise noms comme "Subtag 3", "Zeit1", "Tag 1" pour les lignes 1, 2 et 3 respectivement.

Merci d'avance.

mise à jour le post avec les données json qui le rend facile pour les autres

OriginalL'auteur Nilakshi Naphade | 2017-03-11

3

Vous pouvez utiliser la variable d'index, itérer sur les fréquences de tableau dans *ngFor et de l'utilisation de son index pour les noms d'étiquette
```
<tr *ngFor="let frequency of frequencies; let i=index">
      <td>{{ frequency.value }}</td>
      <td>{{ tagNames[i] }}</td>
      <td>{{ frequency.count }}</td>
  </tr>
```
Assurez-vous d'avoir initialisé les noms d'étiquette:

les noms d'étiquette: string[] = [];

Salut Ishrat..Cela a fonctionné! Merci 🙂

OriginalL'auteur Ishrat Jahan
3

Vous ne pouvez pas avoir de double *ngFor sur un seul élément. Vous pouvez utiliser l'aide de l'élément de <ng-container> comme
```
  <tr *ngFor="let frequency of frequencies; let i=index">
    <ng-container *ngFor="let name of tagNames">
      <td>{{ frequency.value }}</td>
      <td>{{ name }}</td>
      <td>{{ frequency.count }}</td>
    </ng-container>
  </tr>
```
Vous êtes les bienvenus. Heureux d'entendre.
Je suis désolé. Sa ne fonctionne pas pour plusieurs éléments. E. g. Si j'ai un total de 8 rangs puis ces 3 attributs sont le remplissage de 8 fois sur une seule ligne. Je veux simplement imprimer cette 8 x 3 de la matrice.
Je suppose que vous avez seulement besoin de retirer la <ng-container> élément, ou de le déplacer à l'extérieur de la <tr>
Ce que u veux dire par la suppression de <ng container->?? Si je le déplacer à l'extérieur de <tr>, 64 lignes sont à venir, ce qui signifie qu'il répéter 8 fois. Je veux seulement 8 lignes. De toute façon je ne veux pas d'imbrication de boucles for.
Je vais donner un aperçu à la fois de ce que je veux et ce qui est actuellement le rendu

OriginalL'auteur Günter Zöchbauer

Vous devez vous connecter pour publier un commentaire.