javascript - Nejlepší způsob, jak zobrazit seznam uvnitř JSON objektu pomocí Angularu
Snažím se zobrazit objekty uvnitř seznamu v JSON objektu pomocí Angularu, ale opravdu se mi to nedaří rozchodit.
JSON je doručen prostřednictvím služby jako vyřešený Promise:
getJson(): Promise<any> {
return Promise.resolve(this.testdata);
}
Tato funkce vrací [object Promise]
Testovací data ve formátu JSON mají strukturu:
{"errorCode":"ok",
"objList":[{},{},etc.]
}
To, co chci, je zobrazit seznam (například pomocí ngFor) a mít přístup k vlastnostem objektů uvnitř objList.
Můj počáteční nápad byl jen procházet seznam objektů pomocí ngFor, k tomu jsem vytvořil následující třídu
export class ExampleComponent implements OnInit {
json : {"objList": []}
constructor(
private router: Router,
public app: AppService,
public pService: pService
) {
}
ngOnInit(){
this.json = this.pService.getJson()
}
}
To však nefunguje, protože dostávám chybu, že vlastnost objList chybí v typu Promise<any>.
Také jsem zkoušel ngFor s pipe KeyValue, ale také to nefungovalo správně.
Ocenil bych jakoukoli pomoc.
Odpověď č. 1
Můžeš prosím vyzkoušet tento kódový úryvek
ngOnInit(){
this.pService.getJson().
then(response => {
this.json = response;
})
}
Odpověď č. 2
problém je v tom, že this.pService.getJson() vrací referenci na Promise. Chcete-li se dozvědět více o Promise, klikněte zde
Takže tady je oprava, kterou musíte použít:
ngOnInit() {
// you will need to implement the then call of the promise
this.pService.getJson()
.then((result) => {
this.json = result;
// then call the change detection, I will explain this below
return this.cd.detectChanges();
});
}
Navíc to může způsobit problémy s changeDetector, takže možná budete chtít injektovat ChangeDetectorRef do konstruktoru komponenty
constructor(
private router: Router,
public app: AppService,
public pService: Service,
public cd: ChangeDetectorRef,
) {
}
To by vám mělo pomoci, ale dále bych doporučil přečíst si více o promesech a zvážit použití Observable místo Promise, podívejte se na tento odkaz o Observable
