Question

我正在尝试在页面加载时从API检索一些数据。可以很好地检索数据，但是，即使检查familles是否存在，也总是无法读取HTML中未定义的属性familles。

我尝试从Observable以及ActivatedRoute快照加载数据。当我从Observable加载它时，它可以工作，但是会返回一条错误消息。当我从ActivatedRoute快照加载它时，它根本无法工作

这里是函数getFamilles，它从API检索数据：

getFamilles(){
    this.serviceFam.getAllFamilles()
      .subscribe(data => {
        this.listeFamilles = data;
      }, err => {
        console.log(err);
      });
  }

在这里，我的组件的构造函数，我在其中调用函数：

constructor(private serviceFam:FamillesService private route: ActivatedRoute) {
    this.getFamilles();
}

还有我的HTML：

<table *ngIf="listeFamilles">
  <tbody>
    <tr *ngFor="let f of listeFamilles._embedded.familles">
      <th style="vertical-align: middle; padding-left: 10px;">{{ f.nom }}</th>
      <td  id="{{f.nom}}"  style="vertical-align: top;"></td>
    </tr>
  </tbody>
</table>

这是我的服务中的getAllFamilles函数：

public getAllFamilles(){
    return this.httpClient.get(this.host+"/listFamilles");
  }

这是来自我的API的JSON数组的外观：

_embedded: {
familles: [
{
id: 1,
nom: "ARRIEL1",
couleur: "32cd32",
_links: {
self: {
href: "http://localhost:8080/familles/1"
},
famille: {
href: "http://localhost:8080/familles/1{?projection}",
templated: true
},
variantes: {
href: "http://localhost:8080/familles/1/variantes"
},
tempsgammes: {
href: "http://localhost:8080/familles/1/tempsgammes"
}
}
},
{
id: 2,
nom: "ARRIEL2",
couleur: "2b78e4",
_links: {
self: {
href: "http://localhost:8080/familles/2"
},
famille: {
href: "http://localhost:8080/familles/2{?projection}",
templated: true
},
variantes: {
href: "http://localhost:8080/familles/2/variantes"
},
tempsgammes: {
href: "http://localhost:8080/familles/2/tempsgammes"
}
}
}

修复如何无法读取未定义的属性？

0 个答案: