NativeScript & Angular2 - Как связать объект?

Я пытаюсь отобразить данные из REST API. Но пользовательский интерфейс отображается до загрузки данных. Поэтому я получаю следующую ошибку:NativeScript & Angular2 - Как связать объект?

Cannot read property 'name' of undefined

Как связать объект?

Компонент:

@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); 
      }); 
    } 
}

Услуга:

@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); 
      }); 
    } 
}

Шаблон:

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

источник

2016-10-23 schaenk

В качестве побочного примечания я бы рекомендовал вам не подписываться на наблюдаемую внутри другой подписки, как в методе ngOnInit вашего компонента. Вы можете заменить первую. Подписку на .map (fooId => this.fooService.get (fooId)). Таким образом, у вас есть только одна подписка, чтобы отказаться от подписки в ngOnDestroy, и это также делает код менее похожим на обратный ад –

Вы можете использовать ngIf директиву или безопасного оператора навигации (?) (известный также, как Elvis) для защиты вашего шаблона:

ngIf директива

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

Элвис оператор

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

Я предлагаю читать official Angular 2 page about ngIf directive, чтобы понять, как он работает, а также template syntax page about safe nagivation operator (?).

источник

2016-10-23 20:36:31

NativeScript & Angular2 - Как связать объект?

ответ

Смежные вопросы