Блог

Главная - Вопросы по программированию - NativeScript

NativeScript

#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 директиве, чтобы понять, как это работает, а также страницу синтаксиса шаблона о безопасном операторе нагивации ( ? ).