typescript - Angular 2 - Kan inte läsa egenskapen '0' av undefined fel med kontext FELKONTEXT: [object Object]

min tjänst är sådan

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

och extrahera data är som följer

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

I min komponent anropar jag detta på följande sätt

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 detta anropas på följande sätt i html uppstår ett fel

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

jag kan inte ens komma åt mitt nästlade objekt på det här sättet

<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>

resulterar i TypeError: Kan inte läsa egenskapen 'company' av undefined

mitt svar är så här

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

och fullständig data ser ut så här :

[
 {
"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"
},
...
]

Jag förstår inte vad jag gör fel eftersom det fungerar bra med console.log och skriver ut en JSON, men är inte åtkomlig med HTML

jag noterade också att när jag använder

{{records}}

det resulterar i [object Object]

jag måste skriva uttryckligen

{{records | json}}

att få mina fullständiga uppgifter

Hej, vänligen föreslå vad jag gör fel. Jag vill komma åt mina nästlade element som records.BankingDetails.company

Svar #1

Du hämtar records asynkront och när Angular försöker lösa bindningar första gången är records fortfarande null vilket gör att records[0] misslyckas.

Du kan istället använda

{{records && records[0]}}

För andra uttryck kan du använda den säkra navigeringsoperatorn (Elvis) som

{{records?.someprop}}

men det finns ingen säker navigering för åtkomst av arrayindex (?[])

Svar #2

Jag fick äntligen en lösning på detta problem enligt @Akshay Raos förslag, jag använde dessa så att data är tillgänglig innan sidan renderas

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

även enligt @Günter Zöchbauers förslag måste jag använda (Elvis) operatören som

{{record.BankingDetails?.company}}

och det fungerade bra. Tack

Relaterade artiklar