Question

我正在从API获取json数据，其中包含设备的详细信息。

我将其显示在 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>

谢谢。

Answer 1

您需要将*ngIf结构指令添加到<ion-button>，<ion-list>和<ion-row>元素中。这是因为device是异步返回的，因此您不希望在返回observable之前呈现DOM元素。

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

订阅后可观察的角度工作

1 个答案: