CODEWITHSUNDEEP
angularhttpobservableionic4
FrankMa
FrankMa

Reputation: 53

Angular work with observable after subscribe

I am getting json data from API it contains detail of a device.

I display it at the beginning ngOnInit(). Then I have a button on the page 

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

After I get the device, I want to change the state of the device with the button.

The response should be added to the page, instead, I am getting undefined

How can I work with same Observable in different places? How is this situation addressed properly?

API

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

Component

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) 
    ... ?         
}

Page

<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>

Thank you.

Upvotes: 0

Views: 76

Answers (1)

wentjun
wentjun

Reputation: 42576

You will need to add the *ngIf structural directive to your <ion-button>, <ion-list>, and <ion-row> elements. This is because device is returned asynchronously, hence you would not want the DOM element to be rendered before the observable has been returned.

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

Upvotes: 1

Related Questions