Разверните строку таблицы материалов в Angular с помощью кнопки - PullRequest
Новая
       23

Разверните строку таблицы материалов в Angular с помощью кнопки

0 голосов
/ 06 марта 2020

Я строю таблицу материалов в своем проекте Angular. Каждая строка представляет собой сводку данных. Я хотел предоставить расширяемую строку с подробной информацией о данных. Я нашел примеры в Интернете, которые отлично работали, за одним исключением. Во всех примерах есть строка итога, на которую можно кликнуть. Я хочу расширить детали с помощью кнопки в итоговой строке.

Вот фрагмент соответствующего кода в моей таблице ... 

<ng-container matColumnDef="beginPeriodDate">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            Beginning Date
          </th>
          <td mat-cell *matCellDef="let timecard; let i = index;">
            <a
              [routerLink]="['/', clientId, 'timecard', timecard.id, 'details']"
            >
              {{ timecard.beginPeriodDate | date }}
            </a>
            <-- It is this button that I want to have clickable to expand the detail row -->
            <button class="btn btn-primary">
              View Detail | {{i}}
            </button>
          </td>
        </ng-container>

Вот код, который я реализовал для разрешить кликабельность строки ... 

        <tr
          mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></tr>
        <tr
          mat-row
          *matRowDef="let row; let index = index; columns: displayedColumns"
          class="timecardDetails-row"
          [cdkDetailRow]="row"
          [cdkDetailRowTpl]="tpl"
        >{{index}}</tr>

У меня тогда есть этот шаблон ... 

      <ng-template #tpl let-timecard>
        <div class="mat-row detail-row" [@detailExpand]>
          ...
        </div>
      </ng-template>

Я поместил это в свой файл ts компонента ... 

  isExpansionDetailRow = (index, row) => row.hasOwnProperty('detailRow');

У меня есть директива ... 

import {
  Directive,
  HostBinding,
  HostListener,
  Input,
  TemplateRef,
  ViewContainerRef,
  ElementRef,
  OnInit,
  ViewChild
} from '@angular/core';

@Directive({
  selector: '[cdkDetailRow]'
})
export class CdkDetailRowDirective implements OnInit {
  private row: any;
  private tRef: TemplateRef<any>;
  private opened: boolean;
  private el: HTMLElement;

  @HostBinding('class.expanded')
  get expended(): boolean {
    return this.opened;
  }

  @Input()
  set cdkDetailRow(value: any) {
    if (value !== this.row) {
      this.row = value;
      // this.render();
    }
  }

  @Input('cdkDetailRowTpl')
  set template(value: TemplateRef<any>) {
    if (value !== this.tRef) {
      this.tRef = value;
      // this.render();
    }
  }

  constructor(public vcRef: ViewContainerRef, ref: ElementRef) {
    this.el = ref.nativeElement;
  }

  ngOnInit() {
    this.el.addEventListener('click', e => {
      this.toggle();
    });
  }

  @HostListener('click')
   onClick(): void {
     this.toggle();
  }

  toggle(): void {
    console.log('this.opened: ', this.opened);
    if (this.opened) {
      this.vcRef.clear();
    } else {
      this.render();
    }
    this.opened = this.vcRef.length > 0;
  }

  private render(): void {
    this.vcRef.clear();
    if (this.tRef && this.row) {
      this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
    }
  }
}

Так что я просто хочу получить руководство о том, как использовать функциональные возможности для кнопки, и при этом иметь возможность передавать нужную информацию строки через директива.

...