Question

我在查询API端点时无法显示数据。错误消息为ERROR TypeError: Cannot read property 'name' of undefined。我知道我必须跳一下才能显示“匹配”数组，但是这样做有很多困难。

这是网址返回的内容：

    {
      "query": "An",
      "matches": [
         {"name": "Jane Hardman", "id": "248086622848468681706182205280565550732"}, 
         {"name": "Gary Aldan", "id": "246529435182620212343890064029443600078"}
      ]
    }

这是我的meeting-handler.service.ts文件：

constructor(private _httpClient: HttpClient) {}

  getListOfEmployees(query: string = '') {
    return this._httpClient.get(
      `${this.meetingUrl}/employees?q=${query}`);
  }

这是我的meeting-form.component.ts文件：

export class MeetingFormComponent implements OnInit {
  employees;

  constructor(private _meetingService: MeetingHandlerService) { 
    this._meetingService.getListOfEmployees('An').subscribe(
      res => this.employees = res
    )
  }

最后这是我的meeting-form.component.html文件：

<div *ngFor="let employee of employees"></div>
    <p>{{ employee.name }}</p>

Answer 1

name在this.employees.matches内部，您必须在matches字段中进行迭代。

你可以试试吗：

<div *ngFor="let employee of employees?.matches.name"></div>
    <p>{{ employee }}</p>

您可以尝试编辑获取请求吗？

return this.http.get(`${this.meetingUrl}/employees`, {
  params: new HttpParams()
    .set('q', query)
})

我检查了一下您的堆叠炸弹，发现这里有错字：

<div *ngFor="let employee of employees?.matches.name"></div>
<p>{{ employee.name }}</p>

您为什么使用{{ employee.name }}？您以名称进行迭代，因此您的员工已经是name。

尝试一下：

<div *ngFor="let name of employees?.matches.name"></div>
<p>{{ name }}</p>

Answer 2

<div *ngFor="let employee of employees">
    <p>{{ employee.name }}</p>
</div>

已移动结束标记。

从API的“查询”中获取“匹配”数组数据并显示信息

2 个答案: