title: Angular2 multiple ngFor for single row
body: <p>I am trying to display a table with values. Table has 5 columns, and in the 3rd column, I need value from another table. How can I implement this?</p>
  
  <p>My html markup is:</p>
  
  <p>list.component.html</p>
  
  <pre><code>&lt;table &gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt; first &lt;/th&gt;
                      &lt;th&gt; second &lt;/th&gt;
                      &lt;th&gt; Third &lt;/th&gt;
                      &lt;th&gt; Fourth &lt;/th&gt;
                      &lt;th&gt; fifth &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor="let item of items"&gt;
  
                      &lt;td&gt; {{item.name}}&lt;/td&gt;
                      &lt;td&gt; {{item.subject}}&lt;/td&gt;
                      &lt;td *ngFor="let list of details"&gt;
                          {{list.firstName}}{{list.lastName}} ----&gt; problem is here  next 2 tds are not displaying the values properly
                      &lt;/td&gt;
                      &lt;td&gt; {{item.fisrt}}&lt;/td&gt;
                      &lt;td&gt; {{item.second}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>My item array</p>
  
  <pre><code>items[{name:"", subject:"", first:"", second:""}, {name:"", subject:"", first:"", second:""}]
  </code></pre>
  
  <p>My list array</p>
  
  <pre><code>  list[{firstName:"abc", lastname:"pqr"}{firstName:"abc", lastname:"pqr"}]
  </code></pre>
  
  <p>in the first two columns, the values are from one table, and the third column has a value from another table; the remaining two columns have the data from first table again. </p>
  
  <p>How should I implement this?</p>