Question

我通过API调用收到了一些数据，然后将它们转换为在我的角度模板上显示它们，但是它显示了一个空对象，这是我的对象的样子：

这是我的store.ts代码，如下所示：

export class Store implements OnInit {
  store: Store[];
ngOnInit() {
    this.getStore();
  }

  getStore() {
    this.storeService.getAll().subscribe(((response: Store[]) => {
      let data = response['data'];
      for(let  obj in data ) {
        this.store =  data[obj];
        console.log(this.store)
      }
    }));
}

这是我的store.html布局：

<div*ngFor="let key of store | keyvalue ; let i = index" >
        <ul 
            (click)="onPatch(i)">
            <li>{{key.name}}</li>
            <span>{{key.date}}</span>
        </ul>
    </div>

已更新：

如果我这样做：

this.store= response['data'];
    console.log(this.store);

它将给我一个动态的对象，如下面的屏幕快照，这就是为什么要对该对象进行操作的原因：

enter image description here

Answer 1

如果data已经包含您的数组，您可以这样做吗？

  getStore() {
    this.storeService.getAll().subscribe(((response: Store[]) => {
      this.store = response['data'];
    }));

Answer 2

您在http请求的订阅中具有的循环将覆盖每个先前的对象，并且最终在循环结束时仅保留最后一个对象。您应该删除该循环，然后它将正常工作。

Answer 3

@DeborahK根据您提供给我们的信息response.data声明包含数组

https://stackblitz.com/edit/angular-cant-display-multiple-object-in-ngfor-loop?file=src%2Fapp%2Fapp.component.ts

它在这里有效^也许您可以将其分叉并进行修改以显示问题。

无法在* ngFor循环中显示多个对象

3 个答案: