Mat-Table Make 3列展开和1列（单击）

Question

我有一个角材料表，我想制作左列（蓝色/LP）有一个单击事件，将LP传递到其中。我想要正确的列来触发扩展。我现在正在工作以扩展整个行。如何以不同的动作为目标某些列？

html：

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
    <ng-container matColumnDef="{{column.name}}" *ngFor="let column of initColumns">
      <th mat-header-cell *matHeaderCellDef> {{column.display}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
    </ng-container>
    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
        <div class="example-element-detail" [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'">
          <table class="detail-table">
            <tr>
              <th>Weight</th>
              <th>Cube</th>
              <th>Zone</th>
            </tr>
            <tr>
              <td>{{element.LPWeight}}</td>
              <td>{{element.LPCube}}</td>
              <td>{{element.Zone}}</td>
            </tr>
          </table>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row"
      [class.example-expanded-row]="element.expanded" (click)="toggleRow(element)">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
  </table>

.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { LoadinfoService } from 'src/app/services/loadinfo.service';

@Component({
  selector: 'app-lpstoload',
  templateUrl: './lpstoload.page.html',
  styleUrls: ['./lpstoload.page.scss'], animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],

})

export class LpstoloadPage implements OnInit {
  dataSource = ELEMENT_DATA;
  initColumns: any[] = [
    {
      name: 'LP',
      display: 'LP'
    },
    {
      name: 'SourceZone',
      display: 'Source'
    },
    {
      name: 'StopNumber',
      display: 'Stop'
    },
    {
      name: 'CaseCount',
      display: 'Cases'
    }
  ];
  displayedColumns: any[] = this.initColumns.map(col => col.name);
  columnsToDisplay = ['LP', 'SourceZone', 'StopNumber', 'CaseCount'];
  expandedElement: PeriodicElement | null;
  private lpsToLoad: any;
  constructor(private loadInfoService: LoadinfoService) { }

  ngOnInit() {
    //this.lpsToLoad = this.loadInfoService.loadSummary.LPsToLoad;
  }

  toggleRow(element: { expanded: boolean; }) {
    element.expanded = !element.expanded
  }
}

export interface PeriodicElement {
  SG: string;
  LP: string;
  Status: String;
  Zone: string;
  SourceZone: string;
  StopNumber: string;
  CaseCount: number;
  LPWeight: number;
  LPCube: number;
  DBName: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {
    "SG": "",
    "LP": "00006844763848356453",
    "Status": "STAGED",
    "Zone": "SSTG",
    "SourceZone": "DRYF",
    "StopNumber": "4",
    "CaseCount": 120.0,
    "LPWeight": 480.0,
    "LPCube": 69.859573364257813,
    "DBName": "IL_DRY-WMS"
  },
  {
    "SG": "",
    "LP": "00006844763871917089",
    "Status": "STAGED",
    "Zone": "SSTG",
    "SourceZone": "DRYF",
    "StopNumber": "4",
    "CaseCount": 27.0,
    "LPWeight": 391.5,
    "LPCube": 95.586883544921875,
    "DBName": "IL_DRY-WMS"
  },
  {
    "SG": "",
    "LP": "00006844763892120215",
    "Status": "STAGED",
    "Zone": "SSTG",
    "SourceZone": "D-LT",
    "StopNumber": "4",
    "CaseCount": 88.0,
    "LPWeight": 510.39199829101563,
    "LPCube": 67.747936964035034,
    "DBName": "IL_DRY-WMS"
  }
];

Answer 1

在此处在黑暗中拍摄，但我认为您可以做的一件事是将一个表行分为一行中的两个单独的列，并从一个列中触发另一列列的操作（或任何事件触发您想要的事件）事件。在列上，您可以使用 *ngif boolean具有一个覆盖层（或您想要的任何元素）..

您可能需要考虑不使用Mat-table，而是使用具有生成行的自定义指令，就像它是表，您可以进行总体自定义，而不会变成一团糟。