Угловая работа с заметным после подписки - PullRequest
Новая
       25

Угловая работа с заметным после подписки

0 голосов
/ 10 мая 2019

Я получаю данные json из API, в котором содержатся сведения об устройстве.

Я отображаю его в начале ngOnInit () .Тогда у меня есть кнопка на странице 

   <ion-button expand="block" *ngIf="device$ | async as device" (click)="makeAction(device)">{{decideActionText(device)}}</ion-button>

После того, как я получу устройство, я хочу изменить состояние устройства с помощью кнопки.

Ответ должен быть добавленна страницу вместо этого я получаю undefined

Как я могу работать с одним и тем же Observable в разных местах?Как правильно решить эту ситуацию?

API

https://device18.docs.apiary.io/#

Компонент 

private device$: Observable<DeviceDetail>;

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    this.device$ = this.deviceService.getDevice(id);
}

makeAction(device: DeviceDetail) {
    return this.deviceService.makeAction(device) 
    ... ?         
}

Страница 

<ion-content *ngIf="device$ | async as device">
<ion-list>
        <ion-item>
            <ion-label>Status</ion-label>
            <ion-text>{{device.status}}</ion-text>
        </ion-item>
</ion-list>

<ion-row>
        <ion-col class="time" size="auto">
             <b>Time</b>
        </ion-col>
        <ion-col class="time" size="auto" *ngFor="let time of device.values.timeStamp">
             {{time | date:'h:mm:ss'}}
        </ion-col>
 </ion-row>
 <ion-row>
        <ion-col class="value" size="auto">
            <b>Value</b>
        </ion-col>
        <ion-col class="value" size="auto" *ngFor="let value of device.values.value">
            {{value}}
        </ion-col>
 </ion-row>

Спасибо.

1 Ответ

1 голос
/ 10 мая 2019

Вам потребуется добавить структурную директиву *ngIf к элементам <ion-button>, <ion-list> и <ion-row>. Это связано с тем, что device возвращается асинхронно, поэтому вы не хотели бы, чтобы элемент DOM отображался до того, как было возвращено наблюдаемое. 

 <ion-button expand="block" (click)="makeAction(device)" *ngIf="device">{{decideActionText(device)}}</ion-button>
...