Angular 角度材料2数据表组件

我试图从angular material组件实现一个表组件，所有这些都很好，看起来很好，最大的问题是如何用DB中的动态数据填充表。 我从DB收到一个对象数组，如本例中所示，但我真的不知道如何迭代该数组并填充我的表

tablePopulate = [
    {id: ‘1’, name: ‘Jimmy’, progress: ’10%’, color: ‘blue’},
    {id: ‘2’, name: ‘John’, progress: ’40%’, color: ‘yellow’},
    {id: ‘3’, name: ‘Wright’, progress: ’70%’, color: ‘orange’}
  ];

以下是表格组件的示例：

那么我如何用这种数组对象填充这个表呢

---

谢谢，这是事先准备好的

因此，根据您的要求， 让我们在获取数据时以数组格式传递数据

[
     {id: "1", name: "Jimmy", progress: "10", color: "blue"},
     {id: "2", name: "John", progress: "40", color: "yellow"},
     {id: "3", name: "Wright", progress: "70", color: "orange"}
  ]

从HTML中删除

%

作为其附件，您只需从

表格概览示例.html

行：

20

（看一看）

在此处传递数组：

MatTableDataSource（）

如下所示：

import {Component, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';

/**
 * @title Data table with sorting, pagination, and filtering.
 */
@Component({
  selector: 'table-overview-example',
  styleUrls: ['table-overview-example.css'],
  templateUrl: 'table-overview-example.html',
})
export class TableOverviewExam  ple {
  displayedColumns = ['id', 'name', 'progress', 'color'];
  dataSource: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor() {


    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource([
    {id: "1", name: "Jimmy", progress: "10", color: "blue"},
    {id: "2", name: "John", progress: "40", color: "yellow"},
    {id: "3", name: "Wright", progress: "70", color: "orange"}
  ]);
  }

  /**
   * Set the paginator and sort after the view init since this component will
   * be able to query its view for the initialized paginator and sort.
   */
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}



/** Constants used to fill up our data base. */
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];

从'@angular/core'导入{Component，ViewChild}；
从“@angular/material”导入{MatPaginator、MatSort、MatTableDataSource}；
/**
*@title数据表，具有排序、分页和筛选功能。
*/
@组成部分({
选择器：“表概览示例”，
样式URL:['table-overview-example.css']，
templateUrl:'table overview example.html'，
})
导出类表概述示例{
displayedColumns=['id'，'name'，'progress'，'color']；
dataSource:MatTableDataSource.
检查这里，@saikatchakrabortty nice工作正常，您是否也可以清除createNewUser函数并删除这些常量并添加作为答案以获得分数，在这个评论部分，我不能接受最佳回答。让我这样做，：）只有一件小事，这行代码似乎有问题：dataSource:MatTableDataSource；找不到名称“UserData”：|哦，谢谢您的更正，更新了答案。请再次检查。