CODEWITHSUNDEEP
javascripthtmlangularngfor
Khushi
Khushi

Reputation: 1849

Angular2 multiple ngFor for single row

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?

My html markup is:

list.component.html

<table >
            <thead>
                <tr>
                    <th> first </th>
                    <th> second </th>
                    <th> Third </th>
                    <th> Fourth </th>
                    <th> fifth </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of items">

                    <td> {{item.name}}</td>
                    <td> {{item.subject}}</td>
                    <td *ngFor="let list of details">
                        {{list.firstName}}{{list.lastName}} ----> problem is here  next 2 tds are not displaying the values properly
                    </td>
                    <td> {{item.fisrt}}</td>
                    <td> {{item.second}}</td>
                </tr>
            </tbody>
        </table>

My item array

items[{name:"", subject:"", first:"", second:""}, {name:"", subject:"", first:"", second:""}]

My list array

  list[{firstName:"abc", lastname:"pqr"}{firstName:"abc", lastname:"pqr"}]

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.

How should I implement this?

Upvotes: 1

Views: 17444

Answers (1)

Jai
Jai

Reputation: 74738

I guess you require a nested table here in your case: 

<tr *ngFor="let item of items">
    <td> {{item.name}}</td>
    <td> {{item.subject}}</td>
    <td>
      <table>
         <tr>
           <td *ngFor="let list of details">{{list.firstName}} {{list.lastName}}</td>
         </tr>
      </table>
    </td>
    <td> {{item.fisrt}}</td>
    <td> {{item.second}}</td>
</tr>

I got the issue you are facing. i have created a demo @ plnkr.

The problem is you are having two objects in the items array so it loops two times for each object.

Upvotes: 4

Related Questions