Как я могу создать функцию развернуть / свернуть для каждой строки таблицы?Angular6 - PullRequest
Новая
       27

Как я могу создать функцию развернуть / свернуть для каждой строки таблицы?Angular6

0 голосов
/ 20 сентября 2018

Так что мне нужно иметь возможность развернуть некоторые детали в каждой строке таблицы.Прямо сейчас у меня есть две проблемы:

  • Нажатие переключателя развернуть / свернуть вызовет действие для каждой строки в таблице.
  • Первая строка всегда помещает детали над ней.

Вот сегмент кода: 

<tbody>
  <tr *ngFor="let client of clients">
    <td class="details-control">
        <a class="btn btn-link" (click)="collapsed1=!collapsed1">
            <i class="material-icons">
              expand_more
            </i>
        </a>
    </td>
    <td>{{client.firstName}}</td>
    <td>{{client.lastName}}</td>
    <td>{{client.company}}</td>
    <td><input type="checkbox"></td>
  </tr>
  <div *ngIf="!collapsed1">
    <p>Details</p>
  </div>

</tbody>

И как это выглядит:

Переключение

ТакжеРаньше у меня было выражение * ngFor в теге, но я понял, что не могу поразить отдельные объекты клиента, если создаю отдельное для деталей.

Дайте мне знать, как я могу улучшить!

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

Вам нужен логический массив collapsed[] и используйте индекс в ngFor, чтобы вы могли использовать collapsed[i].Посмотрите здесь для использования индекса в ngFor:

ng Для использования индекса

Дайте мне знать, если вам нужна дополнительная информация.Wellcome

0 голосов
/ 20 сентября 2018

Не берите в голову, вот код, который решил это. 

<tbody>
  <tr *ngFor="let client of clients; let i = index">
    <td class="details-control">
        <a class="btn btn-link" (click)="client.hideme=!client.hideme">
            <i class="material-icons" *ngIf="!client.hideme">
              expand_more
            </i>
            <i class="material-icons" *ngIf="client.hideme">
                expand_less
              </i>
        </a>
    </td>
    <td width="30%">{{client.firstName}}
      <tr *ngIf="client.hideme">
        <td>Hey, I'm a bunch of details!</td>
      </tr>
    </td>
    <td>{{client.lastName}}</td>
    <td>{{client.company}}
        <tr *ngIf="client.hideme">
            <td>More Issuer details</td>
        </tr>
    </td>
    <td><input type="checkbox"></td>
  </tr>
</tbody>
0 голосов
/ 20 сентября 2018

Это очень распространенный паттерн.Лучшее и быстрое решение - использовать какой-либо идентификатор вместо логического значения в переменной collapsed1. 

<tbody>
 <tr *ngFor="let client of clients">
  <td class="details-control">
    <a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
        <i class="material-icons">
          expand_more
        </i>
    </a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
  <p>Details</p>
</div>

...