web-dev-qa-db-de.com

angle2: Fehler: TypeError: Eigenschaft '...' von undefined kann nicht gelesen werden

Ich habe den Plunker meines Angular2-Code-Stücks angehängt. Ich möchte ein Feld von meinem JSON-Server aus drucken, kann das aber nicht drucken, da mein Objekt anfangs null ist und über ein Promise gefüllt wird.

Dies ist meine Komponentendatei

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

class MyData {
  xyz : MySubData;
}

class MySubData {
  name : string;
} 
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      {{abc.xyz.name}}
    </div>
  `,
})
export class App implements OnInit {
  abc : MyData = null;
  constructor() {
    this.name = 'Angular2'
  }

  ngOnInit() {
    setTimeout(() => {
      this.abc = new MyData();
      this.abc.xyz = new MySubData();
      this.abc.xyz.name = "Binita";
    }, 2000);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Wenn ich die Zeile {{abc.xyz.name}} aus meiner Vorlage entferne, läuft sie einwandfrei.

Ich habe in meinem Code eine Zeitüberschreitung festgelegt, da ich meine Daten von Promise erhalte (d. H. Asynchroner Aufruf).

Ich kann anfangs verstehen, dass abcnull ist, mein Code kann abc.xyz.name nicht finden. Aber ich möchte keine if-Bedingung zur Prüfung aufstellen. Weil ich mehrere Eigenschaften in einem JSON habe und es nicht möglich ist, dass jede Eigenschaft eine if-Bedingung schreibt.

Wenn in abc der Wert null ist, wird er automatisch durch leere Zeichenfolge ersetzt. Ich möchte das gleiche in Angle2 machen. Bitte vorschlagen.

Unten ist der Plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview

28

Das liegt daran, dass abc zum Zeitpunkt der Vorlagenwiedergabe undefiniert ist. Sie können den sicheren Navigationsoperator (?) verwenden, um die Vorlage zu "schützen", bis der HTTP-Aufruf abgeschlossen ist:

{{abc?.xyz?.name}}

Weitere Informationen zum sicheren Navigationsoperator finden Sie hier .

Aktualisieren:

Der sichere Navigationsoperator kann nicht in Arrays verwendet werden. Sie müssen die NgIf-Direktive nutzen, um dieses Problem zu lösen:

<div *ngIf="arr && arr.length > 0">
    {{arr[0].name}}
</div>

Lesen Sie mehr über NgIf Anweisung hier .

82
Stefan Svrkota

Ein sicherer Navigationsoperator oder ein existentieller Operator oder ein Operator für die Nullausbreitung wird in Angular Template unterstützt. Angenommen, Sie haben eine Komponentenklasse 

  myObj:any = {
    doSomething: function () { console.log('doing something'); return 'doing something'; },
  };
  myArray:any;
  constructor() { }

  ngOnInit() {
    this.myArray = [this.myObj];
  }

Sie können es in der HTML-Vorlagendatei wie folgt verwenden:

<div>test-1: {{  myObj?.doSomething()}}</div>
<div>test-2: {{  myArray[0].doSomething()}}</div>
<div>test-3: {{  myArray[2]?.doSomething()}}</div>
0
Jiping