Binding dynamic data with angular material produce no result-CodePudding

Here is the ts file:

import { Component, OnInit, VERSION } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular '   VERSION.major;
  dataSource: MatTableDataSource<Element>;

  BasicData: any = [
    {
      isActionButtonRequired: true,
      isSearchRequired: true,
      isPaginationRequired: true,
      basicHfColumnData: [
        {
          select: 'checkbox',
          position: 1,
          label: 'Hydrogen',
          weight: 1.0079,
          symbol: 'H',
        },
        {
          select: 'checkbox',
          position: 2,
          name: 'Helium',
          weight: 4.0026,
          symbol: 'He',
        },
        {
          select: 'checkbox',
          position: 3,
          name: 'Lithium',
          weight: 6.941,
          symbol: 'Li',
        },
        {
          select: 'checkbox',
          position: 4,
          name: 'Beryllium',
          weight: 9.0122,
          symbol: 'Be',
        },
        {
          select: 'checkbox',
          position: 5,
          name: 'Boron',
          weight: 10.811,
          symbol: 'B',
        },
        {
          select: 'checkbox',
          position: 6,
          name: 'Carbon',
          weight: 12.0107,
          symbol: 'C',
        },
        {
          select: 'checkbox',
          position: 7,
          name: 'Nitrogen',
          weight: 14.0067,
          symbol: 'N',
        },
        {
          select: 'checkbox',
          position: 8,
          name: 'Oxygen',
          weight: 15.9994,
          symbol: 'O',
        },
        {
          select: 'checkbox',
          position: 9,
          name: 'Fluorine',
          weight: 18.9984,
          symbol: 'F',
        },
        {
          select: 'checkbox',
          position: 10,
          name: 'Neon',
          weight: 20.1797,
          symbol: 'Ne',
        },
      ],
      columnTitleData: [
        { title: 'selectAllCheckbox', sort: false, type: null, source: null },
        { title: 'position', sort: true, type: 'number', source: 'position' },
        { title: 'name', sort: true, type: 'string', source: 'name' },
        { title: 'weight', sort: true, type: 'string', source: 'symbol' },
      ],
      pageSizeOptions: [5, 10, 15],
    },
  ];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.BasicData.basicHfColumnData);
    this.BasicData = { ...this.BasicData, basicHfColumnData: this.dataSource };
  }
}

tempalte:

<div>
  <table
    mat-table
    [dataSource]="BasicData.basicHfColumnData"
    
  >
    <ng-container
      matColumnDef="col"
      *ngFor="let col of BasicData.columnTitleData"
    >
      <th mat-header-cell *matHeaderCellDef>{{ col.title }}</th>
      <td mat-cell *matCellDef="let element">{{ element[col] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="BasicData.columnTitleData"></tr>
    <tr mat-row *matRowDef="let row; columns: BasicData.columnTitleData"></tr>
  </table>
</div>

But I get no result in browser.

Any one help me to understand the issue what I do here?

Live Demo

CodePudding user response：

The first error you are using BasicData.columnTitleData also BasicData must be an object not an array.

The second error columnTitleData must be an array like columnTitleData: ["position", "name", "weight"]; and then pass the changes in your Html:

<div>
  <table
    mat-table
    [dataSource]="BasicData.basicHfColumnData"
    
  >
    <ng-container *ngFor="let col of BasicData.columnTitleData" matColumnDef="{{ col }}">
      <th mat-header-cell *matHeaderCellDef>{{ col }}</th>
      <td mat-cell *matCellDef="let element">{{ element[col] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="BasicData.columnTitleData"></tr>
    <tr mat-row *matRowDef="let row; columns: BasicData.columnTitleData"></tr>
  </table>
</div>


import { Component, OnInit, VERSION } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular '   VERSION.major;
  dataSource: MatTableDataSource<Element>;

  BasicData: any = {
    isActionButtonRequired: true,
    isSearchRequired: true,
    isPaginationRequired: true,
    basicHfColumnData: [
      {
        select: 'checkbox',
        position: 1,
        label: 'Hydrogen',
        weight: 1.0079,
        symbol: 'H',
      },
      {
        select: 'checkbox',
        position: 2,
        name: 'Helium',
        weight: 4.0026,
        symbol: 'He',
      },
      {
        select: 'checkbox',
        position: 3,
        name: 'Lithium',
        weight: 6.941,
        symbol: 'Li',
      },
      {
        select: 'checkbox',
        position: 4,
        name: 'Beryllium',
        weight: 9.0122,
        symbol: 'Be',
      },
      {
        select: 'checkbox',
        position: 5,
        name: 'Boron',
        weight: 10.811,
        symbol: 'B',
      },
      {
        select: 'checkbox',
        position: 6,
        name: 'Carbon',
        weight: 12.0107,
        symbol: 'C',
      },
      {
        select: 'checkbox',
        position: 7,
        name: 'Nitrogen',
        weight: 14.0067,
        symbol: 'N',
      },
      {
        select: 'checkbox',
        position: 8,
        name: 'Oxygen',
        weight: 15.9994,
        symbol: 'O',
      },
      {
        select: 'checkbox',
        position: 9,
        name: 'Fluorine',
        weight: 18.9984,
        symbol: 'F',
      },
      {
        select: 'checkbox',
        position: 10,
        name: 'Neon',
        weight: 20.1797,
        symbol: 'Ne',
      },
    ],
    columnTitleData: ["position", "name", "weight"],
/*     columnTitleData: [
      { title: 'selectAllCheckbox', sort: false, type: null, source: null },
      { title: 'position', sort: true, type: 'number', source: 'position' },
      { title: 'name', sort: true, type: 'string', source: 'name' },
      { title: 'weight', sort: true, type: 'string', source: 'symbol' },
    ], */
    pageSizeOptions: [5, 10, 15],
  };
  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.BasicData.basicHfColumnData);
    this.BasicData = { ...this.BasicData, basicHfColumnData: this.dataSource };
  }
}