单行的Angular2多个ngFor

Question

我正在尝试显示带有值的 table。 Table 有 5 列，在第 3 列中，我需要另一个 table 的值。我该如何实施？

我的 html 标记是：

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>

我的项目数组

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

我的列表数组

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

前两列的值来自一个table，第三列的值来自另一个table；其余两列再次包含第一个 table 中的数据。

我应该如何实施？

Answer 1

我猜你需要一个嵌套的 table 在你的情况下：

<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>

我知道你遇到的问题。我创建了一个 demo @ plnkr。

问题是您在 items 数组中有两个对象，因此它为每个对象循环两次。

单行的Angular2多个ngFor

Angular2 multiple ngFor for single row

html

javascript

ngfor

angular