Question

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

我的html标记是：

list.component.html

dropna=False

我的项目数组

<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:""}]

在前两列中，值来自一个表，第三列有另一个表中的值;其余两列再次包含第一个表中的数据。

我该如何实现？

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

Angular2多个ngFor用于单行

1 个答案: