valore chiave di accesso dell'oggetto - angolare, modello angolare2

Sto cercando di rendere questa pagina: inserisci la descrizione dell'immagine qui

Finora sono in grado di realizzare il banner rosso sopra e le mappe di google. Di seguito è riportato l'API utilizzata per recuperare i dati: http://test.poletalks.com/websites/getData

Ho creato 3 componenti per rappresentare i 3 rettangoli. Sto avendo errore di analisi nel 1 ° rettangolo. Questo file usa dati che sono

{"store":{"id":"58da327fa0358e186624b72daaa","name":"NIT, Calicut","store_type":"Education","description":"National Institute of Technology, Calicut is a leading institute of engineering and architecture in India. The motto of the institute is "From Darkness, Lead us unto Light"","location":[75.9342274000001,11.3216676],"formatted_address":"National Institute Of Technology, Kattangal, Kerala, India","image":"http://res.cloudinary.com/poletalks/image/upload/v1472055369/Nitc_my3vig.jpg"}

Sto cercando di rappresentare il primo rettangolo come un tavolo. Tuttavia non sono in grado di accedere all'oggetto utilizzando ngFor.

details.component.html

<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<table class="table" border="1">
<tr *ngFor="let #item of stored">
<td *ngFor="#key of c | keys">{{key}}:{{c[key]}}  </td>
</tr>
</table>
</div>
</div>
</div>

Ho creato una pipe per convertire l'oggetto in array.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: "keypipe"
})
export class KeypipePipe implements PipeTransform {

transform(value: any, args: string[]): any {
let keys = [];
for (let key in value) {
keys.push(key);
}
return keys;
}
}
//  return null;

Comunque sto riscontrando un errore di analisi .. per favore aiutami ad implementare questa pagina.

risposte:

1 per risposta № 1

In questo caso non hai davvero bisogno della pipa, hai due oggetti dentro un oggetto, quindi puoi semplicemente usare i percorsi delle proprietà. store, qualcosa nella linea di quanto segue:

<fieldset>
<legend>{{stored?.store?.name}}</legend>
<p>{{stored?.store?.description}}</p>
<!-- rest of the properties -->
<img src="/images/{{stored?.store?.image}}" />
</fieldset>

Si noti che stiamo usando il operatore di navigazione sicuro salvaguardare null/undefined valori.

Poi alla tua vista tabella, vogliamo accedere al contenuto di store_admins, quindi il tuo tavolo dovrebbe assomigliare a questo:

<table>
<tr *ngFor="let admin of stored?.store_admins">
<td>{{admin.login_id}}</td>
<!-- rest of the properties -->
</tr>
</table>

Questo dovrebbe farlo! :)

Ecco un

dimostrazione

---