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&#178;',
        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 的列为空。带有点的列可以。

当我为每个matColumnDef在html文件中创建并插入带有点的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是表中的数据数组，列是表的头值

Answer 2

我必须按点将单词分开并缩小。解决我的问题是 https://stackoverflow.com/a/49295994/3468921

角材料设计动态表

2 个答案: