Vyhledávání na webu

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