typescript - Angular 2 - Kan ikke lese egenskapen '0' av undefined-feil med kontekst FEILKONTEXT: [object Object]

min tjeneste er slik

getRecords(): Observable<any>{
    return this.http.get(this.fetchAdminData)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

og utvinne data er som følger

private extractData(res: Response) {
    let body = res.json();
    return body || { };
  }

I komponenten min kaller jeg dette som følger

import {Component, OnInit} from '@angular/core'
import {FormsHandler} from '../services/service.forms'


@Component({
  selector: 'form-admin',
  templateUrl: '../partials/form5.html'
})

export class FormAdminComponent implements OnInit {
  public records
  constructor(private formHandler : FormsHandler){
  }

  ngOnInit(){
    this.formHandler.getRecords().subscribe(res => {
      if (res.ok){
        this.records = res.data
        console.log(res)
        console.log(this.records[0])
      }
    })
  }

}

Men når dette kalles på som følger i HTML, oppstår en feil

{{records}} // this is working perfectly 
    {{records[0]}}  //Cannot read property '0' of undefined ERROR CONTEXT:    [object Object]

jeg kan heller ikke engang få tilgang til mitt nestede objekt på denne måten

<tr *ngFor="let record of records">
              <td>{{record.firstName + " "+ record.middleName+ " "+ record.LastName}}</td>
              <td>{{record.BankingDetails.company}} </td> // This results in errorTypeError: Cannot read property 'company' of undefined
              <td>{{record.BankingDetails}} </td> //working fine but resulting in [object Object]

              <td>Pending</td>
              </td>
            </tr>

resulterer i TypeError: Kan ikke lese egenskapen 'company' av undefined

mitt svar er slik

Object {ok: true, data: Array[2]}

og fullstendig data ser slik ut :

[
 {
"Address": {
"addressLine1":  "nh" ,
"addressLine2":  "nghn" ,
"city":  "ngh" ,
"formStatus": 2 ,
"pinCode":  "ngh" ,
"state":  "nghn"
} ,
"BankingDetails": {
"bankName":  "csdcss" ,
"company":  "cd" ,
"designation":  "kn" ,
"loanAmount":  "csd" ,
"loanPurpose":  "cs" ,
"panCardNumber":  "84894848" ,
"salary":  "55"
} ,
"contact":  "vsd" ,
"date":  "vsd" ,
"dob": Mon Jan 01 1 00:00:00 GMT+00:00 ,
"email": [email , »
"firstName":  "cs" ,
"firstname":  "" ,
"formStatus": 3 ,
"gender":  "male" ,
"id":  "98fd72b9-62fe-4fcd-90d6-f2a5f83c052b" ,
"isAdmin": 1 ,
"lastName":  "vs" ,
"lastname":  "" ,
"middleName":  "vds" ,
"middlename":  "" ,
"month":  "vsd" ,
"password": <binary, 60 bytes, "24 32 61 24 31 30..."> ,
"username":  "" ,
"year":  "vs"
},
...
]

Jeg skjønner ikke hva jeg gjør feil fordi det fungerer fint med console.log og skriver ut en JSON, men er ikke tilgjengelig med HTML

jeg la også merke til at når jeg bruker

{{records}}

det resulterer i [object Object]

jeg må eksplisitt skrive

{{records | json}}

å få mine komplette data

Hei, vennligst foreslå hva jeg gjør feil. Jeg vil få tilgang til mine nestede elementer som records.BankingDetails.company

Svar #1

Du henter records asynkront, og når Angular prøver å løse bindinger første gang, er records fortsatt null, derfor feiler records[0].

Du kan i stedet bruke

{{records && records[0]}}

For andre uttrykk kan du bruke sikker-navigasjonsoperatoren (Elvis) som

{{records?.someprop}}

men det finnes ingen sikker navigasjon for tilgang til array-indekser (?[])

Svar #2

Jeg fikk endelig en løsning på dette problemet i henhold til @Akshay Raos forslag, jeg brukte disse slik at dataene er tilgjengelige før siden gjengis

<div *ngIf="records">
</div>

og også i henhold til @Günter Zöchbauers forslag, må jeg bruke (Elvis)-operatøren som

{{record.BankingDetails?.company}}

og det fungerte bra. Takk

Relaterte artikler