#angular #nativescript #angular2-nativescript
#angular #nativescript #angular2-nativescript
Вопрос:
Я пытаюсь отобразить данные из REST API. Но пользовательский интерфейс отображается до загрузки данных. Итак, я получаю следующую ошибку:
Не удается прочитать свойство ‘name’ из 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>
Комментарии:
1. В качестве дополнительного примечания я бы рекомендовал вам избегать подписки на observable внутри другой подписки, как вы делаете в методе ngOnInit вашего компонента. Вы можете заменить первый .subscribe на .map(fooId => this.FooService.get(fooId)). Таким образом, у вас есть только одна подписка, чтобы отказаться от подписки в ngOnDestroy, и это также делает код менее похожим на ад обратного вызова
Ответ №1:
Вы можете использовать ngIf
директиву или оператор безопасной навигации ( ?
) (известный также как оператор Elvis) для «защиты» вашего шаблона:
ngIf
директива
<div *ngIf="foo">
<ActionBar [title]="foo.name"></ActionBar>
<GridLayout>
<Label [text]="foo.description"></Label>
</GridLayout>
</div>
Оператор Elvis
<ActionBar [title]="foo?.name"></ActionBar>
<GridLayout>
<Label [text]="foo?.description"></Label>
</GridLayout>
</div>
Я предлагаю прочитать официальную страницу Angular 2 о ngIf
директиве, чтобы понять, как это работает, а также страницу синтаксиса шаблона о безопасном операторе нагивации ( ?
).