Angular material 在角材质表中绑定动态数据

我对angular是新手，希望在angular material表中绑定动态数据，该表将生成，但数据不会显示

我的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>

{{col}}
{{element[col]}
{{error}}

在我的页面下方，将生成表但不绑定数据

---

首先，将数据放在this.datasource.data下

您的Html需要如下所示：

身份证件
{{element.ID}
标题
{{element.Title}
创建于
{{element.CreatedAt}
{{error}}

角度材质表存储馈送给它的数据。 因此，必须使用此类重新初始化角度材质数据源

你的代码应该是这样的

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;
 }

从'@angular/core'导入{Component，OnInit}；
从“../../services/blog.service”导入{BlogService}；
从“../../models/Blog”导入{Blog}；
@组成部分({
选择器：“应用程序管理类别”，
templateUrl:'./manage categories.component.html'，
样式URL:['./管理类别.component.css']
})
导出类ManageCategories组件在NIT上实现{
displayedColumns:string[]=['ID'，'Title'，'Created At']；
标题=‘管理博客’；
博客：博客；
错误：字符串；
数据源：MatTableDataSource；
构造函数（私有blogService:blogService）{}
ngOnInit（）{
此.blogService.getBlogs（）.subscribe(
（数据：Blog）=>this.dataSource=newMattableDataSource（数据）；，
error=>this.error=error
);    
console.log（this.dataSource）；
}
}
导出接口元素{
ID:Guid；
标题：字符串
创建于：字符串；
}

拥有一个接口也是一种更好的代码实践

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;
 }