Angular 12 - 返回循环答案

【问题标题】：Angular 12 - returns loopAngular 12 - 返回循环
【发布时间】：2021-11-07 20:40:37
【问题描述】：

我从 api 获取数据作为对象。我正在尝试通过 ngFor 在 component.html 中使用，但出现此错误

找不到“test”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到数组等Iterables。

所以我的对象是这样的：

{id: 9, name: 'test', username: 'testmg', email: 'test@gmail.com', email_verified_at: null, ...}

我该如何解决这个问题？

profile.component.ts

  username:any
  playerData:any

  constructor(private dataService: DataService,private router: ActivatedRoute) { }

  ngOnInit(): void {
    this.username = this.router.snapshot.params.username
    this.getOne()
  }


  getOne(){
    this.dataService.getProfile(this.username).subscribe(res=>{
      this.playerData = res
    })
  }

profile.component.html

 <div *ngFor="let item of playerData">
     {{item}}
 </div>

【问题讨论】：

你对{{item}}9, est@gmail.com...有什么期望？
实际上，如果我输入 {{item.id}} 我想查看 id 的值，或者如果我输入 {{item.name}} 我想查看名称的值

标签： angular typescript rxjs ngfor

【解决方案1】：

在将响应分配给this.playerData之前，使用RxJs映射将对象包装在数组中，无需更改模板。

this.dataService.getProfile(this.username).pipe(
 map(resp => [resp])
).subscribe(res=>{
  this.playerData = res;
}

一些代码优化：

声明playerData为

playerData$: Observable<any[]>;

将 API 响应绑定到 playerData$

this.playerData$ = this.dataService.getProfile(this.username).pipe(
    map(resp => [resp])
);

在模板中使用AsyncPipe，它将为我们订阅和取消订阅：

<div *ngFor="let item of playerData$ | async">
    {{item}}
</div>

这样你就不需要关心订阅和取消订阅 Observable。

使用的进口商品

import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

【讨论】：

【解决方案2】：

你是什么意思解决？该消息不言自明：您有一个对象playerData；而且你不能*ngFor 一个对象！

如果你想遍历对象的属性，你可以这样做：

<div *ngFor="let item of Object.Keys(playerData)">
   {{item}} : {{playerData[item]}}
</div>

举例

【讨论】：