ngx-datatable: кнопка с матовой иконкой вместо якоря для кнопки переключения - PullRequest
Новая
       9

ngx-datatable: кнопка с матовой иконкой вместо якоря для кнопки переключения

0 голосов
/ 14 октября 2019

Я использую ngx-datatable

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

  • Текущий код работает ниже: 

<ngx-datatable ...

<ngx-datatable-column 
[width]="60" 
[resizeable]="false" 
[sortable]="false" 
[draggable]="false" 
[canAutoResize]="false">
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
    <a href="javascript:void(0)" style="text-decoration: none;" [class.datatable-icon-right]="!expanded" [class.datatable-icon-down]="expanded"
      title="Expand/Collapse Row" (click)="toggleExpandRow(row)">
    </a>
  </ng-template>
</ngx-datatable-column>

</ngx-datatabe>

  • При щелчке тега привязки строка, к которой привязан тег привязкибыл на расширяется, в то время как все остальные остаются закрытыми. Это правильное поведение.

  • Вместо тегов привязки я хотел бы использовать значок с изображением углового материала со значком раскрытия и закрытия.

Я попробовал следующее (заменил якорь на кнопку): 

   <button mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>{{expandIcon}}</mat-icon></button>

В моих .ts я делаю: 

 toggleExpandRow(row){
    if(environment.debug){
      console.log("toggleExpandRow(row, $event) Called", row);
    }
    if(this.expandToggle){
      this.expandIcon = 'expand_more';
      this.expandToggle=false;
    }else{
      this.expandIcon = 'chevron_right';
      this.expandToggle=true;
    }

Но когда я нажимаю кнопку в одной строке, все строкиизменить значок на расширенный. Как сделать так, чтобы только строка, на которую я нажал, имела расширенную кнопку? Кажется, что мне нужно каким-то образом получить доступ к фактической кнопке в DOM, которая была нажата по порядку, чтобы установить этот значок и только этот значок. Любая помощь или идеи?

Обновление:

Я понял, чтоЯ могу получить индекс строки, по которой щелкнули. Затем я могу получить массив matIcons: string [] и использовать идентификатор строки для индексации в этом массиве, чтобы обновить значок каждой строки. У кого-нибудь есть лучший способ? 

 <ng-template let-rowIndex="rowIndex" let-row="row" let-expanded="expanded" ngx-datatable-cell-template>

Еще лучше, я мог бы просто использовать "расширенное" состояние ... опубликует решение, если оно будет работать.

1 Ответ

0 голосов
/ 14 октября 2019

Я смог сделать это с помощью «расширенной» переменной: 

    <button *ngIf="expanded" mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>expand_more</mat-icon></button>
    <button *ngIf="!expanded" mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>chevron_right</mat-icon></button>
...