Angular 作为材质角度表数据源的对象数组

我的用户数据看起来像这样，这导致了问题

[{"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"}]

我使用的是棱角材质和导入的棱角材质。我遇到的第一个问题是在这个数据结构中使用*NgFor，但是由于Angular V6，您现在可以使用keyValue管道，这非常酷！所以这个问题解决了

然后我想将*NgFor放入一个表中，这样每个人都可以填充一行。您不使用NgFor作为表，而是使用数据源-

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

---

typeScript新手，以及如何获得我想要的结果。请提供帮助？

此用户在以下情况下不是数组：

{ ...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();
  }
}

将this.user={…data}替换为this.users=data。您从服务器获得一个数组，并且需要将此数组用于数据源。为什么要将其转换为对象？将用户重命名为用户，因为它是一个用户数组，而不是单个用户。从而将其类型更改为Array。

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

  constructor(private apiServicefile: ApiServicefile) { }


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