Angular динамика материального дизайна c таблица

Question

Я пытаюсь создать в Angular 9 динамической c таблице.

У меня есть 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 dot.

Спасибо

Answer 1

Мне приходится разделять слова точкой и сокращать. Решения по моей проблеме: { ссылка }

Answer 2

Вы также можете попробовать создать динамическую c таблицу таким образом, в вашем случае он отлично работает для значения «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 это мой массив данных в таблице, а столбцы - это значения заголовка моей таблицы