如何在 angular 中使用 ngfor 从 object 中获取数据

Question

我正在尝试访问 Object 内的空间数组内的价格数据

 this.apartmentService.customPackage(this.uid, this.client, this.access_token).subscribe(user => {
      this.packages = user;
      console.log(this.packages);
      
    })
  }

模板文件

 <ng-container *ngFor="let item of packages?.essential_interiors.space.name | keyvalue">
  <li class="list-group-item">{{item.value}}</li>
</ng-container>

但我无法从这个响应中获取特定空间

任何线索都会有所帮助

Answer 1

您应该从 foreach 中删除名称，例如：

 <ng-container *ngFor="let item of packages?.essential_interiors.space">
 <li class="list-group-item">{{item.price}}</li>
 </ng-container>

Answer 2

KeyValuePipe仅将 Object 或 Map 转换为键值对数组。

但在你的情况下，你有一个数组space 。

你应该简单地 itarate *ngFor="let item of packages?.essential_interiors.space"

 <ng-container *ngFor="let item of packages?.essential_interiors.space">
  <li class="list-group-item">{{item.price}}</li>
</ng-container>

工作示例：

https://stackblitz.com/edit/angular-vfwcio?file=src/app/app.component.html

Answer 3

检查下面的东西，让我知道什么是 output 显示器

<ul>
  <li *ngFor="let item of packages; let i = index">
    {{i}} {{item}}
  </li>
</ul>

Answer 4

您是否直接在您的 li 标签中尝试过喜欢这个 item.essential_interiors.space.name 。

 <ng-container *ngFor="let item of packages">
  <li class="list-group-item">{{item.essential_interiors.space.name}}</li>
</ng-container>