Перебор массива объекта в Angular 2+ для каждого свойства объекта использует отдельную <tr> - PullRequest
Новая
       34

Перебор массива объекта в Angular 2+ для каждого свойства объекта использует отдельную <tr>

0 голосов
/ 18 февраля 2019

Я пытаюсь решить этот senario, где я должен использовать таблицу и достичь ниже

Массив объектов 

[
    {
        name:'Jhon',
        email:'jhon@gmail.com',
        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 на tr, может кто-нибудь помочь мне с этим?

Ответы [ 4 ]

0 голосов
/ 19 февраля 2019

Мы можем решить это обоими способами Используя * ngFor на tbody и используя ng-container

Я обнаружил, что ng-container является более подходящим способом сделать это, так как tbody создавал несколько тел в таблице, где 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>
0 голосов
/ 18 февраля 2019 
<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 должен выглядеть следующим образом согласно вашему ВОПРОСУ!.

0 голосов
/ 18 февраля 2019 
<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>
0 голосов
/ 18 февраля 2019

Вы можете перебрать тег tbody вот так 

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

</tbody>
...