Как сделать расширяемые строки таблицы в цикле ngFor [Angular]? - PullRequest
Новая
       12

Как сделать расширяемые строки таблицы в цикле ngFor [Angular]?

1 голос
/ 21 мая 2019

У меня есть вложенные таблицы, при щелчке по строке мне нужно отобразить данные под строкой таблицы. Тем не менее, данные отображаются в конце ngRepeat.

HTML: 

  <table class="table table-hover table-bordered table-responsive-xl">
  <thead>
    <th> Name </th>
    <th> Place </th>
    <th> Phone </th>
  </thead>

  <tbody>

  <tr *ngFor="let data of data1" (click) ="expand()">
        <td> +{{data.name}} </td>
        <td> {{data.place}} </td>
        <td> {{data.phone}} </td>
  <td> {{data.hobbies}} </td>
  <td> {{data.profession}} </td>
 </tr>

 <ng-container *ngIf="expandContent">
    <tr *ngFor="let data of data2">
        <td> {{data.datades.name}} </td>
        <td> {{data.datades.hobbies}} </td>
        <td> {{data.datades.profession}} </td>
 </tr>
 </ng-container>
 </tbody>
 </table>

Компонент: 

export class AppComponent  {
expandContent = true;
  data1 =[{
 'name' : 'john',
 'place' : 'forest',
 'phone' : '124-896-8963'
  },{
 'name' : 'Jay',
 'place' : 'City',
 'phone' : '124-896-1234'
  }, {
 'name' : 'Joseph',
 'place' : 'sky',
 'phone' : '124-896-9632'
  },
  ]

 data2 =[{
'whoseData' : 'john',
'datades' : {
'name' : 'john',
'hobbies' : 'singing',
'profession' : 'singer'
 }
 },{
'whoseData' : 'Jay',
'datades' : {
'name' : 'jay',
'hobbies' : 'coding',
'profession' : 'coder'
}
}
]

 expand(){
this.expandContent = !this.expandContent
}
 }

При нажатии первой строки, которую я хотел бы отобразить, данные, связанные с первой строкой, под ней.

Ожидаемый результат enter image description here

DEMO

Ответы [ 2 ]

0 голосов
/ 21 мая 2019

Вам необходимо внести следующие изменения:

  1. Включение основной строки и соответствующих строк сведений в одну и ту же ngFor итерацию цикла
  2. Добавьте свойство expanded к объектам data вместо глобального expandContent
  3. Определите метод для фильтрации сведений о щелкнутой строке

Шаблон может выглядеть следующим образом: 

<ng-container *ngFor="let data of data1">
  <tr (click)="data.expanded = !data.expanded">
    <td> {{ data.expanded ? '&ndash;' : '+'}} {{data.name}} </td>
    <td> {{data.place}} </td>
    <td> {{data.phone}} </td>
    <td> {{data.hobbies}} </td>
    <td> {{data.profession}} </td>
  </tr>
  <ng-container *ngIf="data.expanded">
    <tr *ngFor="let data of findDetails(data)">
      <td> {{data.datades.name}} </td>
      <td> {{data.datades.hobbies}} </td>
      <td> {{data.datades.profession}} </td>
    </tr>
  </ng-container>
</ng-container>

, где findDetails определяется как: 

findDetails(data) {
  return this.data2.filter(x => x.whoseData === data.name);
}

См. этот стек для демонстрации.

0 голосов
/ 21 мая 2019

Ваши раскрывающиеся данные отображаются внизу таблицы, потому что ваш ng-container находится в отдельном div. Checkout Bootstrap Collapse и посмотрите на пример Аккордеона, чтобы увидеть, решит ли он вашу проблему: https://getbootstrap.com/docs/4.1/components/collapse/

...