web-dev-qa-db-ja.com

2つの異なる* ngForを使用してテーブルにデータを入力する

以下は私の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
    }
  ]
}

これらの属性を表示したいと思います。テーブル内のvalue、count、およびtagName（tagIdを使用して取得）。最初の2つの属性には、ngForを使用しています。ただし、tagIdを使用して取得したtagNameも出力し、tagNames配列に格納したいと思います。以下は私のコンポーネントコードです：

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)
      }
    )
  }

そして、これは私がUIでそれらを印刷しようとしている方法です：

<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>

しかし、私は列tag-nameの下に[オブジェクトオブジェクト]を取得しています。誰かがこの問題を解決するのを手伝ってもらえますか？

上記のようにng-containerを使用してみましたが、UIでの結果は次のようになります： tag-name-issue

どちらが間違っています。行1、2、3にそれぞれ「サブタグ3」、「Zeit1」、「タグ1」のタグ名を持つ最初の3行だけが必要です。

前もって感謝します。

angularhtml-tablengfor
5
Nilakshi Naphade

インデックス変数を使用し、* ngForの頻度配列を反復処理し、そのインデックスをtagNamesに使用できます。

<tr *ngFor="let frequency of frequencies; let i=index">
      <td>{{ frequency.value }}</td>
      <td>{{ tagNames[i] }}</td>
      <td>{{ frequency.count }}</td>
  </tr>

TagNamesが初期化されていることを確認してください。

tagNames：string [] = [];

4
Ishrat Jahan

二重にすることはできません*ngFor単一の要素。ヘルパー要素を使用できます<ng-container> お気に入り

  <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>
4
Günter Zöchbauer