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:

listponent.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?

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.ponent.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?

• javascript
• html
• angular
• ngfor

• Please, post plunker. – Igor Janković Commented Mar 2, 2017 at 8:13
• This is not really an Angular2 question. It is much more general. – Aluan Haddad Commented Mar 2, 2017 at 8:13
• 1 the details is part of a item?i mean every item have details? – yala ramesh Commented Mar 2, 2017 at 8:15
• 2 i think instead of put the 2nd ngFor in td, create some div or span inside td and loop so you table structure will not broke – Ravin Singh D Commented Mar 2, 2017 at 8:19
• If you truly want to expand the table horizontally as needed depending on the length of details you could fill the table based on the length of details. If it varies per row, you can still use this approach by getting the max length up front. If your data is paged/scrolling asynchronous data it will be much harder. – Aluan Haddad Commented Mar 2, 2017 at 8:39

1 Answer 1

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.