Question

我正在尝试显示一些json数据，并不断收到此错误：

错误错误：尝试与“ Leanne Graham”进行比较时出错。仅允许数组和可迭代项

代码如下：

数据

{id: 1, name: "Leanne Graham"}

app.component.html

<ul>
  <li *ngFor="let element of data">
    {{element.name}}
  </li>
</ul>

app.component.ts

export class AppComponent implements OnInit {

  data = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {

    this.get_users_by_id(1);

  }

  get_users_by_id(id) {
    this.dataService.get_users_by_id(id).subscribe((res: any[]) => {
      this.data = res;
    });
  }

}

最后是服务部分

get_users_by_id(id) {
    return this.http.get(this.baseUrl + '/users/' + id);
}

我该如何解决？

Answer 1

由于您只是得到一个对象，而不是数组，因此请尝试更改代码，如下所示：

布置返回数据的结构

export interface User {
  id: number;
  name: string;
}

这定义了接收到的数据映射到的结构。

将数据检索到该结构（服务）中

get_users_by_id(id) {
    return this.http.get<User>(this.baseUrl + '/users/' + id);
}

请注意通用参数：this.http.get<User>。通过在此处指定User，我们告诉内置的http服务将数据检索到该结构中。

订阅客户端（组件）

export class AppComponent implements OnInit {

  data: User;

  constructor(private dataService: DataService) {}

  ngOnInit() {

    this.get_users_by_id(1);

  }

  get_users_by_id(id) {
    this.dataService.get_users_by_id(id).subscribe((res: User) => {
      this.data = res;
    });
  }

}

现在，当响应返回到传递给subscribe方法的第一个函数时，数据已经映射到User。

在用户界面（模板）中显示单个用户

<ul>
  <li>
    {{data.name}}
  </li>
</ul>

然后，这实际上没有任何意义。您是否希望“ get_users_by_id”通常返回多个用户？

Answer 2

一定要检查 keyvalue 管道。

使用 keyvalue 管道：

<ul>
 <ng-container *ngFor="let element of data | keyvalue">
    <li *ngIf="element.key === 'name'">
      <span>{{element.value }}</span>
    </li>
  </ng-container>
</ul>

工作演示：https://stackblitz.com/edit/keyvalue-pipe-uvovp7

Angular 7只允许数组和可迭代的代码出现问题

2 个答案: