Привязать динамические данные в таблицу угловых материалов

Question

Я новичок в angular и хочу связать динамические данные в таблице угловых материалов, таблица будет сгенерирована, но данные не отображаются.

мой файл TS

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';    

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

displayedColumns: string[] = ['ID', 'Title', 'Created At'];

title = 'Manage Blogs';
blogs: Blog;
error: string;
dataSource:any;

constructor(private blogService: BlogService) { }

ngOnInit() {     

 this.blogService.getBlogs().subscribe(
  (data: Blog) => this.dataSource = data,
  error => this.error = error
 );    
 console.log(this.dataSource);    
 }
 }

мой HTML-файл

        <div class="box-body">              

        <mat-table #table [dataSource]="dataSource">
          <ng-container [matColumnDef]="col" *ngFor="let col of 
        displayedColumns">
            <mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element[col] }} </mat- 
        cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header- 
        row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat- 
        row>
        </mat-table>            
        {{error}}
      </div>

ниже моей страницы, где будет сгенерирована таблица, но данные не связаны

Answer 1

В таблице угловых материалов хранятся данные, поданные в нее.Таким образом, вам придется повторно инициализировать угловой материал dataSource , используя этот класс MatTableDataSource.

Ваш код должен выглядеть следующим образом:

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';    

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

displayedColumns: string[] = ['ID', 'Title', 'Created At'];

title = 'Manage Blogs';
blogs: Blog;
error: string;
dataSource: MatTableDataSource<Element>;

constructor(private blogService: BlogService) { }

ngOnInit() {     

 this.blogService.getBlogs().subscribe(
  (data: Blog) => this.dataSource = new MatTableDataSource < Element > (data);,
  error => this.error = error
 );    
 console.log(this.dataSource);    
 }
 }

 export interface Element {
   ID: Guid;
   Title: String
   Created At': String;
 }

Наличие интерфейса - лучшая практика кода.

Answer 2

Прежде всего, поместите ваши данные в this.datasource.data.

Ваш HTML должен выглядеть следующим образом:

     <div class="box-body">              
        <mat-table #table [dataSource]="dataSource.data">

   <!-- ID Column -->
    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let element"> {{element.ID}}</td>
    </ng-container>

   <!-- Title Column -->
    <ng-container matColumnDef="Title">
      <th mat-header-cell *matHeaderCellDef>Title</th>
      <td mat-cell *matCellDef="let element"> {{element.Title}}</td>
    </ng-container>


  <!-- Created At Column -->
    <ng-container matColumnDef="CreatedAt">
      <th mat-header-cell *matHeaderCellDef>Created At</th>
      <td mat-cell *matCellDef="let element"> {{element.CreatedAt}}</td>
    </ng-container>

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

        </mat-table>   

        {{error}}
      </div>