Как правильно установить это свойство в Angular? - PullRequest
Новая
       27

Как правильно установить это свойство в Angular?

1 голос
/ 05 ноября 2019

У меня есть интерфейс: 

export interface ItemResponse {
  get: Array<Item>;
  sent: Array<Item>;
}

У меня есть некоторый код в компоненте: 

itemData: ItemResponse;

ngOnInit() {
  this.getItems();
}

getItems(){
  this.itemService.getAllItem().subscribe(data => {
    this.itemData = data;
  });
}

Часть шаблона: 

<item-table [data]="itemData.get"></item-table>

Мне нужноиспользуйте таблицу угловых материалов несколько раз, поэтому я создал для этого компонент. Я хочу передать dataSource, но я получаю следующую ошибку:

ItemComponent.html: 5 ОШИБКА TypeError: Невозможно прочитать свойство 'get' из undefined в Object.eval [как updateDirectives] (ItemComponent. html: 11) в Object.debugUpdateDirectives [as updateDirectives] (core.js: 30537) в checkAndUpdateView (core.js: 29933) в callViewAction (core.js: 30174) в execComponentViewsAction (core.js: 30116date при проверке проверки).js: 29939) в callViewAction (core.js: 30174) в execEmbeddedViewsAction (core.js: 30137) в checkAndUpdateView (core.js: 29934) в callViewAction (core.js: 30174)

Как мне объявить это свойство? Я пробовал много способов, например: 

itemData = {get: [], sent:[]} as ItemResponse;

В этом случае itemData.get не был неопределенным, но он был пустым.

У вас есть идеи, что мне с этим делать? Извините за грамматические ошибки, английский не мой родной язык.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 05 ноября 2019

Почему вы не используете асинхронный канал? 

// Component
itemData$: Observable<ItemResponse>;

ngOnInit() {
 this.itemData$ = this.getItems();
}

getItems(){
return this.itemService.getAllItem();
}

в Temlpate 

<item-table [data]="(itemData$ | async)?.get"></item-table>

Или, если вы не хотите использовать асинхронный канал, измените свой компонент на этот 

<item-table *ngIf="itemData" [data]="itemData.get"></item-table>
0 голосов
/ 05 ноября 2019

Ваш код в порядке и работает как задумано.

Проблема в том, что до того, как ваш асинхронный вызов вернется, itemData не определено, поэтому в шаблоне возникает ошибка при попытке оценить itemData.get

Я предлагаю использовать безопасный навигатор, также известный как необязательная цепочка MDN : 

<item-table [data]="itemData?.get"></item-table>

Это предотвратит ошибку, поскольку попытается получить толькоget свойство, если itemData определено.

0 голосов
/ 05 ноября 2019

Вы получаете сообщение об ошибке, потому что getItems() выполняет асинхронную операцию, а itemData равно undefined, пока подписка не вернет значение .

Вам необходимо либо использовать async pipe или логический флаг (например, isLoaded) для ожидания завершения подписки.

Для async pipe вы можете сделать следующее:

getItems(){
    this.itemData = this.itemService.getAllItem();
}

И в шаблоне 

<item-table [data]="(itemData | async).get"></item-table>

Или если вы хотите использовать логический флаг: 

isLoaded = false;

getItems(){
    this.itemService.getAllItem().subscribe(data => {
       this.isLoaded = true;
       this.itemData = data;
    });
}

И в шаблоне: 

<item-table [data]="itemData.get" *ngIf="isLoaded"></item-table>

Надеюсь, это поможет

...