Question

我是Angle的新手，想将动态数据绑定到Angle材质表中，将生成表，但数据未显示。

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

首先，将数据放在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>

Answer 2

角材料表存储了输入到它的数据。因此，您将必须使用此类 MatTableDataSource 重新初始化Angular Material dataSource 。

您的代码应如下所示，

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

拥有接口也是更好的代码实践。

在角形材料表中绑定动态数据

2 个答案: