从每个Object属性中对Angular 2+中的对象数组进行迭代使用单独的

Question

我正在尝试解决这种情况，我必须使用表并在下面实现

对象数组

[
    {
        name:'Jhon',
        email:'[email protected]',
        add1:'addr line 1',
        add2:'addr line 1'
    },

    ...
]

应该显示为

<table>
    Name == should be in one tr => td

    email == should be in one tr => td

    add1 and add2 == should be in one tr => 2 td's

</td>

我无法使用* ngFor来实现这一点可以有人帮我这个吗？

Answer 1

你可以像这样循环tbody标签

 <tbody *ngFor="let a of arr">
    <tr><td>{{a.name}}</td></tr>
    <tr><td>...</td><td>...</td></tr>

</tbody>

Answer 2

<tr *ngFor="let user of users; let i = index">
        <td>{{user.name}}</td>
</tr> 
<tr *ngFor="let user of users; let i = index">
        <td>{{user.email}}</td>
</tr> 
<tr *ngFor="let user of users; let i = index">
        <td>{{user.add1}}</td>
        <td>{{user.add2}}</td>
</tr> 

根据您的问题，Html应该是这样的！

Answer 3

<table border cellspacing="0">
<tbody *ngFor="let a of data">
<tr>
   <td>name</td>
  <td>{{a.name}}</td>
  </tr>
 <tr>
    <td>Email</td>
  <td>{{a.email}}</td>
  </tr>
<tr>
     <td>Address</td>
  <td>{{a.add1}}</td>
   <td>{{a.add2}}</td>
  </tr>
    <tr>
     <td colspan="3" style="background-color:black" ></td>
  </tr>
 </tbody>
  </table>

Answer 4

我们可以通过两种方式解决它在tbody上使用* ngFor并使用ng-container

我发现ng-container是更合适的方法，因为tbody在表中创建了多个body，其中ng-container正在生成指定的正常tr元素。

<tbody *ngFor="let emp of Employees">
  <tr>
    <td colspan="2">{{emp.name}}</td>
  </tr>
  <tr>
    <td colspan="2">{{emp.email}}</td>
  </tr>
  <tr>
    <td>{{emp.address1}}</td>
    <td>{{emp.address2}}</td>
  </tr>
</tbody>

<ng-container *ngFor="let emp of Employees">
  <tr>
    <td colspan="2">{{emp.name}}</td>
  </tr>
  <tr>
    <td colspan="2">{{emp.email}}</td>
  </tr>
  <tr>
    <td>{{emp.address1}}</td>
    <td>{{emp.address2}}</td>
  </tr>
</ng-container>