Question

我有一个详细页面。我从http订阅一个Observable，将结果分配给一个对象。该页面包含信息。稍后，我想使用http post将命令发送到服务器。该帖子期待服务器的响应。我想将响应中的数据添加到对象。

已更新

获取和发布的服务方法。他们两个都在工作。

/* Getting the detail of the device */
getDevice(id: string): Observable<DeviceDetail> {
        const url = `${this.devicesUrl}/${id}`;
        return this.http.get<DeviceDetail>(url)
            .pipe(
                tap(() => this.log(`Fetched device id=${id}`)),
                catchError(this.handleError<DeviceDetail>(`Fetching device id=${id}`))
            );
    }

/* making action */
post(device: Device, action): : Observable<HttpResponse<Device>> {
        const url = `${this.devicesUrl}/${device.id}`;

        return this.http.post<Device>(url, action, {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
            }), observe: 'response'
        })
            .pipe(
                tap(() => this.log(`Command post successfully`)),
                catchError(this.handleError<HttpResponse<Device>>('Post command'))
            );
    }

预期结果是显示详细信息。（有效）

private device: DeviceDetail;

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

然后单击页面上的按钮。（有效）

<ion-col *ngIf="device">
<ion-button expand="block" (click)="makeAction(device)">Turn on</ion-button>
</ion-col>

发送命令并获得响应后。

makeAction(device: DeviceDetail) {
        this.deviceService.makeAction(device)
            .subscribe((res) => {
                if (device) {
                    this.device.values.timeStamp.push(res['body.values.timeStamp']);
                    // I can see the response
                    console.log(res);
                    // How to add response to the object? This is not working
                     this.device.values.value.push(...res.body.values.value, ...this.device.values.value);
                   // Neither this
                   //this.device.values.value = [...this.device.values.value, ...res['body.values.value']];
                }
            });
    }

并被添加到对象并显示在页面上。（我不知道该怎么解决）

谢谢您的帮助。

Answer 1

使用服务！

创建一个数据服务，其中将保存您从this.deviceService.getDevice(id)获得的数据响应。将服务中的数据绑定到要显示详细信息的html中。

现在，当您发出发布请求时，请从服务中获取数据，并将收到的任何新响应附加到服务中的相同数据中。

伪代码。

data.service.ts

export class DataService {
    myData:any;
}

details.component.ts

export class DetailsComponent {
   constructor(public dataService: DataService){}
}

details.component.html

{{dataService.myData}}

postData.component.ts

export class PostData {
   constructor(public dataService: DataService) {}
   postData() {
   apiCall().subscribe(data => //udpate this.dataService.myData);
   }
}

postData.component.html

<button (click)="postData()">Post Data</button>

在这行上。您可以尝试实施。

Answer 2

最后，我得到了想要的结果。

ngOnInit相同

private device: DeviceDetail;

ngOnInit() {
        const id = this.route.snapshot.paramMap.get('id');
        this.deviceService.getDevice(id).subscribe((res: DeviceDetail) => {
             this.device = res;
        });
}

错误，但可以正常工作。它接受数组的内容。它将内容添加到相同的数组以及响应中。

this.device.values.value.push( ...this.device.values.value, ...res.body.values.value);

插入数组的正确方法。

它仅将响应中的新内容添加到对象数组。

makeAction(device: DeviceDetail) {
        this.deviceService.makeAction(device)
            .subscribe((res) => {
                    this.device.values.value = this.device.values.value.concat(res.body.values.value);
            });
    }

感谢大家的时间和帮助。

如何与其他地方的已订阅观察者一起工作？

2 个答案:

插入数组的正确方法。