Angular材料設計動態表

Question

我正在嘗試在 Angular 9 動態表中創建。

我有 html：

<div *ngFor="let column of columns">
  <ng-container matColumnDef="{{column.columnSearchName}}">
    <mat-header-cell *matHeaderCellDef>
      <span mat-sort-header> <div [innerHTML]="column.columnName"></div></span>
      <span><input matInput class="filter-input" placeholder=""/></span>
    </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{insertValueInTable(element, column)}} </mat-cell>
  </ng-container>
</div>

<mat-header-row *matHeaderRowDef="(displayedColumns$)"></mat-header-row>
<mat-row *matRowDef="let row; columns: (displayedColumns$);"></mat-row>

和 ts：

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { GardenListService } from '../service/garden-list.service';
import { GardenDataSource } from '../dataSource/GardenDataSource';
import { MatSort } from '@angular/material/sort';
import { Column } from './class/column';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, AfterViewInit {

  data = new GardenDataSource(this.gardenService);
  displayedColumns$: string[] = [];

  @ViewChild(MatSort) sort: MatSort;

  columns: Column[] = [];

  constructor(private gardenService: GardenListService) {
  }

  ngOnInit(): void {
    this.columns = [
      {
        columnName: 'Číslo',
        columnSearchName: 'number',
      }, {
        columnName: 'Příjmení',
        columnSearchName: 'person.lastName',
      }, {
        columnName: 'Jméno',
        columnSearchName: 'person.firstName',
      }, {
        columnName: 'Město',
        columnSearchName: 'person.address.city',
      }, {
        columnName: 'Ulice',
        columnSearchName: 'person.address.street',
      }, {
        columnName: 'Číslo popisné',
        columnSearchName: 'person.address.streetNumber',
      }, {
        columnName: 'Číslo parcely',
        columnSearchName: 'plotNumber',
      }, {
        columnName: 'Plocha m²',
        columnSearchName: 'area',
      }, {
        columnName: 'Nájemné',
        columnSearchName: 'rent',
        currencyType: true,
      }
    ];

    this.columns.forEach(col => this.displayedColumns$.push(col && col.columnSearchName));

  }

  ngAfterViewInit(): void {

    this.sort.sortChange.subscribe(() => {
      this.gardenService.getAll(this.sort.active, this.sort.direction).subscribe((response) => {
        this.data = response;
      });
    });
  }

  insertValueInTable(element: any, column: Column): string {
      return element[column.columnSearchName];
  }
}

我從后端獲得的數據。 數據已加載，當我想在表格中顯示它時，我看到只填充了幾列。

包含帶有點的columnSearchName的列是空的。 沒有點的列是可以的。

當我在 html 文件中為每個 matColumnDef 創建帶有點的 columnSearchName 時，一切正常。 但是動態它不起作用。

如何顯示columnSearchName點中的數據。

謝謝

Answer 1

您也可以嘗試以這種方式創建動態表，在您的情況下，它適用於值“person.firstName”或任何帶點的值。

<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.header">
       <th mat-header-cell *matHeaderCellDef>{{ column.header }}
       </th>

       <td mat-cell *matCellDef="let element">{{ element[column.value] }}
       </td>
   <ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

在上面的代碼中，dataSource 是我在表中的數據數組，列是我的表的 header 值

Answer 2

我必須按點拆分單詞並減少。 我的問題的解決方案是https://stackoverflow.com/a/49295994/3468921