对象数组作为 Material Angular 表的数据源答案

【问题标题】：Array of objects as dataSource for Material Angular table对象数组作为 Material Angular 表的数据源
【发布时间】：2019-06-29 20:29:10
【问题描述】：

我的user 数据看起来像这样导致问题...

[{"firstName":"Pinkie","lastName":"Connelly","username":"Darlene.Marvin","email":"Isobel_Renner@hotmail.com"},{"firstName":"Easter","lastName":"Ruecker","username":"Giovani.Collier59","email":"Annamae54@gmail.com"},{"firstName":"Harmon","lastName":"Luettgen","username":"Rosanna51","email":"Moshe98@yahoo.com"},{"firstName":"Angeline","lastName":"Kunze","username":"Gabriel_Braun69","email":"Jackson21@hotmail.com"},{"firstName":"Gayle","lastName":"Bahringer","username":"Dorcas_Roob55","email":"Greyson96@gmail.com"},{"firstName":"Adriana","lastName":"Renner","username":"Serenity.Armstrong42","email":"Sim.Robel@gmail.com"},{"firstName":"Arvid","lastName":"Kiehn","username":"Estrella87","email":"Jaylan_Morissette70@yahoo.com"},{"firstName":"Kristofer","lastName":"Nader","username":"Terence.Walker7","email":"Brady99@hotmail.com"},{"firstName":"Rosa","lastName":"Lebsack","username":"Freida_Hegmann46","email":"Alanna_Schmitt89@hotmail.com"},{"firstName":"Rogers","lastName":"Thiel","username":"Mike_Braun","email":"Agnes.Shields3@gmail.com"}]

我正在使用 Angular 和导入的 Material Angular。我遇到的第一个问题是将*NgFor 与这种数据结构一起使用，但是从Angular V6 开始，您现在可以使用keyValue 管道，这真的很酷！这样问题就解决了。

然后我想将 *NgFor 放到一个表中，这样每个人都会填充一行。您不将 NgFor 用于表，而是使用 dataSource -

<table mat-table #table [dataSource]="user">
  <!-- table rows -->
</table>

但又一次...Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError

这就是我得到user的方式 -

export class AppComponent {
  error: any;
  title = 'toms-app';
  user: User;

constructor(private apiServicefile: ApiServicefile) { }


ngOnInit(): void {
  this.apiServicefile.getUser()
    .subscribe(
      (data: User) => this.user = { ...data }, // success path
      error => this.error = error // error path
    );
}
}

typeScript 新手以及如何获得我想要的结果。请帮忙？

【问题讨论】：

将this.user = { ...data } 替换为this.users = data。你从服务器得到一个数组，你的数据源需要这个数组。为什么要把它变成一个对象？将 user 重命名为 users，因为它是用户的数组，而不是单个用户。因此将其类型更改为 Array.

标签： angular typescript angular-material

【解决方案1】：

this.user 不是一个数组：

{ ...data };

就这样吧：

this.user = data;

或者顺便改进一下，html：

<table mat-table #table [dataSource]="user | async">
  <!-- table rows -->
</table>

在 TS 文件中，您的用户是：

Array<User>

，不是用户，但是当我们用 'async' 管道在 html 用户中编写时，您可以像这样定义它：

Observable<Array<User>> or Observable<User[]>

并将 this.apiServicefile.getUser() 分配给该字段。

export class AppComponent {
  error: any;
  title = 'toms-app';
  user: Observable<Array<User>>;

  constructor(private apiServicefile: ApiServicefile) { }


  ngOnInit(): void {
    this.user = this.apiServicefile.getUser();
  }
}

【讨论】：