Angular2 multiple ngFor for single row

Question

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?

This is not really an Angular2 question. It is much more general. — Aluan Haddad, Mar 02 '17 at 08:13
the details is part of a item?i mean every item have details? — yala ramesh, Mar 02 '17 at 08:15
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, Mar 02 '17 at 08: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, Mar 02 '17 at 08:39

Jai · Accepted Answer · 2017-03-03T11:04:16.480

4

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.

edited Mar 03 '17 at 11:04

answered Mar 02 '17 at 08:28

Jai

74,255
12
74
103

And you can adapt this approach easily to work with React, with Aurelia, with AngularJS, or heck just plain old JavaScript. This is a nice and direct solution. – Aluan Haddad Mar 02 '17 at 08:54
one more problem am facing in this is the same cell display the value 2 times like "abcpqr" is two time displaying in the third column first row. how can i resolve this issue? – Khushi Mar 02 '17 at 09:01
make a space between them: `{{}} {{}}` and give a width to the td element. – Jai Mar 02 '17 at 09:08
1

oh no no that's not actually i meant. i mean my result is now "abcpqr" "abcpqr" in the same cell. ie, 2 values in single cell – Khushi Mar 02 '17 at 11:38
well well how come you got your name changed. woaaah. – Jai Mar 02 '17 at 11:50
@NidhiMalhotra then you can put this on tr element then. – Jai Mar 02 '17 at 11:51
i give like this

{{list.firstName}} {{list.lastName}}

but the result is same only difference is one name disaplying below the name like "abcpqr" abcpqr – Khushi Mar 02 '17 at 12:12
_make a space between them: {{}} {{}} and give a width to the td element._ did you tried it giving width to the td(parent) element. – Jai Mar 02 '17 at 12:14
yes i tried but the result is same. in a single cell i got 2 values at a time ie firstnameand lastname printing 2 times – Khushi Mar 03 '17 at 10:04
@NidhiMalhotra added a plnkr for you. – Jai Mar 03 '17 at 11:04

Angular2 multiple ngFor for single row

1 Answers1