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>

---

我遇到了您面臨的問題。 我已經創建了一個演示@ plnkr 。

問題是您在items數組中有兩個對象，因此每個對象循環兩次。