Question

单击后，我有一个绑定表的数据源我需要通过角度服务调用特定的api 并再次将数据绑定到datasource1并将其与内部的新mat-table绑定旧的垫子桌子有点像嵌套的垫子桌子，我坚持如何创建多个数据源，因为我不知道将完成多少点击最终用户点击特定行取决于那里的标记在数据源内。我是否需要创建尽可能多的数据源，取决于点击还是有更好的方法？

主机的指令，该主机列出了click事件并切换数据：我创建了一条指令，并且能够将一条简单的短信绑定到点击特定行。

如果标志为y，我将禁用mat-table行的click事件

预期结果：-单击特定行时具有多行的mat-table 行，将在点击的行下方附上一个新的垫子表格shoukd，如此

我的视图位置组件：-

  <mat-table *ngIf="showTable" #table [dataSource]="dataSource">

    <ng-container *ngFor="let header of displayedColumns;index as i" [matColumnDef]="header">
      <mat-header-cell *matHeaderCellDef>{{header}} </mat-header-cell>
      <ng-container *ngIf=" header!='Action' ">
        <mat-cell *matCellDef="let element"> {{element[header]}} </mat-cell>
      </ng-container>
      <ng-container *ngIf=" header=='Action' ">
        <mat-cell *matCellDef="let row">
          <mat- icon(click)="
          openMoveLocation(controls.selectBu.value,controls.selectLevel.value
          ,controls.selectLocation.value)">
            redo</mat-icon>
            <mat-icon (click)="openDeleteLocation()">delete</mat-icon>
            <mat-icon (click)="openDeleteTeritory()">delete_forever</mat-icon>
        </mat-cell>
      </ng-container>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl" (toggleChange)="onToggleChange($event)">
    </mat-row>
  </mat-table>

</div>

<ng-template #tpl let-element>
  <div class="mat-row" [@detailExpand] style="overflow: hidden">
    <mat-table *ngIf="showTable" #table [dataSource]="dataSource1">

      <ng-container *ngFor="let header of displayedColumns;index as i" [matColumnDef]="header">
        <mat-header-cell *matHeaderCellDef>{{header}} </mat-header-cell>
        <ng-container *ngIf=" header!='Action' ">
          <mat-cell *matCellDef="let element"> {{element[header]}} </mat- cell>
        </ng-container>
        <ng-container *ngIf=" header=='Action' ">
          <mat-cell *matCellDef="let row">
            <mat-icon (click)="openMoveLocation
            (controls.selectBu.value,
             controls.selectLevel.value,
              controls.selectLocation.value)">
              redo</mat-icon>
            <mat-icon (click)="openDeleteLocation()">delete</mat-icon>
            <mat-icon (click)="openDeleteTeritory()">delete_forever
            </mat-icon>
          </mat-cell>
        </ng-container>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl" (toggleChange)="onToggleChange($event)">
      </mat-row>
    </mat-table>
  </div>
</ng-template>

详细信息行指令：-

import {Directive, EventEmitter, HostBinding, HostListener, Input, Output, 
    TemplateRef, ViewContainerRef, Injector} from '@angular/core';
import { LocationService } from '../../services/location/location.service'

@Directive({
  selector: '[cdkDetailRow]'
})

export class CdkDetailRowDirective {
  private row: any;
  private tRef: TemplateRef < any > ;
  private opened: boolean;

  @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;
    }
  }

  @Output() toggleChange = new EventEmitter<CdkDetailRowDirective>();

  constructor(public vcRef: ViewContainerRef) {}

  @HostListener('click')
  onClick(): void {
    if (this.row.FLAG != 'Y' && this.row.CNT != 'Y') {
      this.toggle();
    }
  }

  toggle(): void {
    if (this.opened) {
      this.vcRef.clear();
    } else {
      this.render();
    }
    this.opened = this.vcRef.length > 0;
    this.toggleChange.emit(this);
  }

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

我的view-location.ts：-

onToggleChange(cdkDetailRow: CdkDetailRowDirective): void {

  this.requestParameters.ACTION = '0';
  this.requestParameters.BUCODE = this.controls.selectBu.value.CMPSEQNO;
  this.requestParameters.GEOLOCCODE = cdkDetailRow['row'].LOC_CODE;
  console.log(this.requestParameters)
  //call api through service and bind data to new data source but do i 
  // need to create 5 data source if user click 5 times 
  if (this.openedRow && this.openedRow.expended) {
    this.openedRow.toggle();
  }
  this.openedRow = cdkDetailRow.expended ? cdkDetailRow : undefined;
}

预期结果：-

参考图片1 a simple mat-table with multiple data that i achieved

参考图片2 after click on any row a api call should be done and a new mat-table should bind just below the clicked row

参考图片3 nested grid after click on inner mat-table

点击特定行

0 个答案: