Как работать с подпиской наблюдаемой в другом месте? - PullRequest
Новая
       22

Как работать с подпиской наблюдаемой в другом месте?

0 голосов
/ 03 июня 2019

У меня есть страница с подробностями. Я подписываюсь на Observable с http получить результат назначен объекту. Страница покрыта информацией. Позже я хочу отправить команду на сервер с http постом. Пост ожидает ответа от сервера. Я хочу добавить данные из ответа на объект.

ОБНОВЛЕНО

Методы обслуживания для получения и публикации. Они оба работают. 

/* 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']];
                }
            });
    }

И добавляется к объекту и показывается на странице. (Не знаю как решить)

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 04 июня 2019

Наконец-то я получил желаемый результат.

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);
            });
    }

Спасибо всем за ваше время и помощь.

0 голосов
/ 03 июня 2019

Используйте службы !!

Создайте службу данных, которая будет хранить ответ данных, полученный от this.deviceService.getDevice(id).Свяжите эти данные из сервиса в ваш html, где вы хотите показать подробности.

Теперь, когда вы делаете почтовый запрос, извлекайте данные из сервиса и добавляйте любой новый ответ, который вы получаете к тем же данным изservice.

Псевдокод.

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>

Так что на этой линии.Вы можете попробовать реализовать.

...