NativeScript & Angular2 - Wie bindet man ein Objekt?

Ich versuche, Daten von einer REST-API anzuzeigen. Die Benutzeroberfläche wird jedoch gerendert, bevor die Daten geladen werden. So bekomme ich einen folgenden Fehler:NativeScript & Angular2 - Wie bindet man ein Objekt?

Cannot read property 'name' of undefined

Wie kann ich ein Objekt binden?

Die Komponente:

@Component({ 
    selector: 'foo-detail', 
    templateUrl: 'foo.component.html', 
    providers: [FooService], 
}) 
export class FooDetailComponent implements OnInit { 
    public foo:Foo; 

    constructor(private fooService:FooService, 
       private route:ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.route.params 
      .map(params => params['id']) 
      .subscribe(fooId => { 
       this.fooService 
        .get(+fooId) 
        .subscribe(res => this.foo = res); 
      }); 
    } 
}

Der Service:

@Injectable() 
export class FooService { 
    constructor(private http: Http) {} 

    get(fooId) { 
     return this.http.get('http://api.foo.com/foos/' + fooId) 
      .map(res => res.json()) 
      .map(foo => { 
       return new Foo(foo.id, foo.name, foo.description); 
      }); 
    } 
}

Die Vorlage:

<ActionBar [title]="foo.name"></ActionBar> 
<GridLayout> 
    <Label [text]="foo.description"></Label> 
</GridLayout>

Quelle

2016-10-23 schaenk

Als eine Randnotiz, würde ich empfehlen, dass Sie vermeiden, eine Observable in einem anderen Abonnement abonnieren, wie Sie in der ngOnInit Methode Ihrer Komponente tun. Sie können den ersten .subscribe durch eine .map (fooId => this.fooService.get (fooId)) ersetzen. Auf diese Weise haben Sie nur ein Abonnement, um sich in ngOnDestroy abzumelden, und der Code sieht weniger wie eine Callback-Hölle aus –

Sie ngIf Richtlinie oder eine sichere Navigation Betreiber nutzen können (?) (auch bekannt als Elvis-Operator), um Ihre Vorlage zu schützen:

ngIf Richtlinie

<div *ngIf="foo"> 
<ActionBar [title]="foo.name"></ActionBar> 
<GridLayout> 
    <Label [text]="foo.description"></Label> 
</GridLayout> 
</div>

Elvis Betreiber

<ActionBar [title]="foo?.name"></ActionBar> 
<GridLayout> 
    <Label [text]="foo?.description"></Label> 
</GridLayout> 
</div>

ich official Angular 2 page about ngIf directive zu verstehen empfiehlt das Lesen, wie es sowie template syntax page about safe nagivation operator (?) funktioniert.

Quelle

2016-10-23 20:36:31

NativeScript & Angular2 - Wie bindet man ein Objekt?

Antwort

Verwandte Themen