编辑

Question

我从JSON中的Spring服务器获取数据，数据可以很好地恢复，但是当我尝试在Angular组件中对其进行foreach时，出现以下错误：无法读取未定义的属性Affaires

constructor(private serviceFam:FamillesService, private 
serviceAff:AffaireService, private router:Router, private route: 
ActivatedRoute) {
    this.listeFamilles = this.route.snapshot.data;
    this.listeAffaires = this.route.snapshot.data
    for(let a of this.listeAffaires._embedded.affaires){
      console.log(a.sn);
   }
 }

这是我的API的调用：

//Connexion avec le serveur
export class AffaireService {

  public host: string="http://localhost:8080";

  constructor(private httpClient:HttpClient) {}

  public getAllAffaires(){
    return this.httpClient.get(this.host+"/affaires");
  }
}

这是我的解析器：

@Injectable()
export class AffairesResolver implements Resolve<Affaire> {

  constructor(private affaires: AffaireService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    return this.affaires.getAllAffaires();
  }
}

编辑：

这是我的listeAffaires变量的内容：

affaire:
page:
number: 0
size: 20
totalElements: 118
totalPages: 6
__proto__: Object
_embedded:
affaires: Array(20)
    0: {id: 1, sn: "A129B", zc: null, certificat: null, etat: false, …}
1: {id: 2, sn: "1196M", zc: null, certificat: null, etat: false, …}
2: {id: 3, sn: "784M", zc: null, certificat: null, etat: false, …}
3: {id: 4, sn: "565M", zc: null, certificat: null, etat: false, …}
4: {id: 5, sn: "B161B", zc: null, certificat: null, etat: false, …}
5: {id: 6, sn: "A446B", zc: null, certificat: null, etat: false, …}
6: {id: 7, sn: "862M", zc: null, certificat: null, etat: false, …}
7: {id: 8, sn: "1594", zc: null, certificat: null, etat: false, …}
8: {id: 9, sn: "B112B", zc: null, certificat: null, etat: false, …}
9: {id: 10, sn: "40080", zc: null, certificat: null, etat: false, …}
10: {id: 11, sn: "A704B", zc: null, certificat: null, etat: false, …}
11: {id: 12, sn: "869M", zc: null, certificat: null, etat: false, …}
12: {id: 13, sn: "B069B", zc: null, certificat: null, etat: false, …}
13: {id: 14, sn: "930B", zc: null, certificat: null, etat: false, …}
14: {id: 15, sn: "1698", zc: null, certificat: null, etat: false, …}
15: {id: 16, sn: "287B", zc: null, certificat: null, etat: false, …}
16: {id: 17, sn: "B887B", zc: null, certificat: null, etat: false, …}
17: {id: 18, sn: "C875B", zc: null, certificat: null, etat: false, …}
18: {id: 19, sn: "A747B", zc: null, certificat: null, etat: false, …}
19: {id: 20, sn: "118BTC", zc: null, certificat: null, etat: false, …}
length: 20
__proto__: Array(0)
__proto__: Object
_links: {first: {…}, self: {…}, next: {…}, last: {…}, profile: {…}}
__proto__: Object

Answer 1

 for(let a of this.listeAffaires._embedded.affaires){
      if(this.listeAffaires._embedded.affaires) console.log(a.sn);

}

添加如我上面建议的检查应该可以解决您的问题

Answer 2

尝试使用paramMap和get获取路由变量：

let id = this.route.snapshot.paramMap.get('id');

以可观察的方式读取参数：

this.route.paramMap
      .subscribe(params => {
          let id = params.get('id');
          console.log(id);
      });

更新：

如果要遍历参数：

this.route.paramMap
      .subscribe(params => {
          for (let key in params) {
            if(params.hasOwnProperty(key)) {
                console.log(key + ": " + params[key]);
            }
          }
      });

Answer 3

看到代码的最后一部分（JSON响应）后，我感到您应该遍历this.listeAffaires.affaires而不是this.listeAffaires._embedded.affaires。

constructor(private serviceFam:FamillesService, private 
serviceAff:AffaireService, private router:Router, private route: 
ActivatedRoute) {
    this.listeFamilles = this.route.snapshot.data;
    this.listeAffaires = this.route.snapshot.data
    for(let a of this.listeAffaires.affaires){
      console.log(a.sn);
   }
 }

编辑

这是sample，它正在执行与您尝试的相同的操作。

Answer 4

我和您有同样的问题，我试图遍历Spring DATA返回的对象，该对象当然包括_embedded。就我而言，我使用了foreach，但是在ngOnInit（）里面，并且遇到了相同的错误。

解决方案是将foreach放在subscribe（）函数中，然后在ngOnInit（）中调用该函数，我不知道为什么会发生这种情况，但这与同步和异步函数有关。

我希望有一天能对某人有所帮助。

修改：这是打字稿代码：

我从后端获取数据，然后将其存储在对象cars中，并使用相同的subscribe（）方法遍历cars._embedded.cars并将id和modele存储在Array dropdownCars中。


dropdownCars = [];
public cars: any = {} ;

onGetCars(){
    this.bankservice.getCars()
      .subscribe(data => {
        this.cars = data;

        this.cars._embedded.cars.forEach(element => {
          this.dropdownCars.push(
                                  {id: element.id , 
                                   modele: element.modele});
        });
        
    }, err => { console.log(err); } );

  }

然后，您只需在ngOnInit（）中调用该方法，即可确保this.cars._embedded.cars不会是未定义的。


  ngOnInit(): void {

    this.onGetCars();

  }

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

4 个答案:

编辑