title: Populating table using 2 different *ngFor
body: <p>Below is my array of JSON objects:</p>
  
  <pre class="lang-ts prettyprint-override"><code>{
    "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
      }
    ]
  }
  </code></pre>
  
  <p>I want to display these attributes viz. value, count and tagName(which is taken using tagId) in a table. For first two attributes I am using ngFor. But, I want to also print tagName which I am getting using tagId and storing it in tagNames array. Following is my component code:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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) =&gt; {
            this.frequencies = response.json().tagFrequency
            for(let tagFrequency of this.frequencies) {
              this.getTagName(tagFrequency.tagId)
            }
          }
          )
          .catch(
              (error: any) =&gt; console.error(error)
          )
      }
  }
  
    getTagName(tagId: number): string {
      return this.tagService.getTag(tagId)
      .then(
          (response: any) =&gt; {
            this.tagNames.push(response.name)
          }
      )
      .catch(
        (error: any) =&gt; {
          console.error(error)
        }
      )
    }
  </code></pre>
  
  <p>And this is how I am trying to print them on UI:</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;{{ 'word' }}&lt;/th&gt;
        &lt;th&gt;{{ 'tag-name' }}&lt;/th&gt;
        &lt;th&gt;{{ 'frequency' }}&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;ng-container *ngFor="let name of tagNames"&gt;
          &lt;tr *ngFor="let frequency of frequencies; let i=index"&gt;
            &lt;td&gt;{{ frequency.value }}&lt;/td&gt;
            &lt;td&gt;{{ name }}&lt;/td&gt;
            &lt;td&gt;{{ frequency.count }}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/ng-container&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But I am getting [object object] under the column tag-name. Can someone help me to resolve this issue?</p>
  
  <p>I tried using ng-container as above, but result looks like this on UI:
  <a href="https://i.stack.imgur.com/GqJn9.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/GqJn9.jpg" alt="tag-name-issue"></a></p>
  
  <p>Which is wrong. I need only first 3 rows with a tag-names as "Subtag 3", "Zeit1", "Tag 1" for rows 1,2,3 respectively.</p>
  
  <p>Thanks in advance.</p>