【问题标题】:Angular Material data Table Data sourceAngular Material 数据表 数据源
【发布时间】:2019-02-28 20:57:57
【问题描述】:

我正在尝试将后端数据连接到我的 dataSource,但我不断收到一条错误消息:ERROR

Error: Provided data source did not match an array, Observable, or DataSource
export class AdminComponent implements OnInit {

  dataSource: Object; 

  this.data.getUsers().subscribe(data => {
    this.dataSource = data;
  });

【问题讨论】:

标签: angular datatable angular-material


【解决方案1】:

日期源类型错误。不要指定对象。确保它是:array、Observable 或 DataSource。示例:

import {Component} from '@angular/core';

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

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

【讨论】:

  • 是的,我一开始就是这样做的,效果很好。这种方式的问题是我无法将变量从我的组件传递到数据源。就像我有来自后端服务的数据一样
  • 其他带有 observables 的例子。线索是数据源不应该被定义为Objectblog.angular-university.io/angular-material-data-tabletechiediaries.com/angular-material-table
  • 我把它改成了这个,但我不认为它是正确的做法:dataSource = []; this.data.getUsers().subscribe(data => { this.dataSource = [data]; console.log(this.dataSource); });
猜你喜欢
  • 1970-01-01
  • 2020-03-19
  • 1970-01-01
  • 1970-01-01
  • 2018-08-02
  • 1970-01-01
  • 2020-11-30
  • 2018-03-26
  • 2019-04-11
相关资源
最近更新 更多