javascript - 单行的Angular2多个ngFor

Question

我正在尝试显示一个包含值的表格。表有 5 列，在第 3 列中，我需要来自另一个表的值。我该如何实现？

我的 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"}]

前两列的值来自一个表，第三列的值来自另一个表；其余两列再次具有第一个表中的数据。

我应该如何实现？

Answer 1

我猜你需要一个嵌套表来解决你的问题:

<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 数组中有两个对象，因此它为每个对象循环两次。