订阅的角度替代方案？答案

【问题标题】：Angular alternative to subscribe?订阅的角度替代方案？
【发布时间】：2018-10-27 17:18:33
【问题描述】：

我使用的是异步订阅，因此在更新之前会返回计数器变量。是否有替代订阅的方法，它只允许我在使用从后端获取的值更新后才返回计数器变量？

makeOffer(product: string, offer: number): number {
  let formData = new FormData();
  formData.append('name', product);
  formData.append('offer', offer.toString());
  let counter = 1

  this.http.post('http://localhost/Project/PHP/negotiation.php', formData)
  .subscribe((data) => {
    counter = data['counter']
  }, (error) => {
    console.log('Error! ', error)
  });
  return counter;
}

【问题讨论】：

不，您需要以某种方式处理请求是异步的事实。

标签： angular

【解决方案1】：

您需要使用 .map 而不是 .subscribe。稍后主要用于将响应更新到 DOM。

makeOffer(product: string, offer: number): Observable<number | null> {
  let formData = new FormData();
  formData.append('name', product);
  formData.append('offer', offer.toString());
  let counter = 1

  return this.http.post('http://localhost/Project/PHP/negotiation.php', formData)
  .map((data) => {
    return data['counter']
  }, (error) => {
    console.log('Error! ', error);
    return null;
  });
}

组件：

this.service.makeOffer().subscribe((counter)=>{
     console.log(counter);
  });

【讨论】：

您好 Suresh Kumar Ariya，我遇到了同样的问题：我正在使用共享服务通过 2 个不相关的组件传递数据，并且我的变量在设置之前就被获取了。我尝试使用 .map 但它在 Angular 9 中不再存在。你知道用什么来代替它吗？谢谢。

【解决方案2】：

不幸的是，没有。解决这个问题的正确方法是从方法中返回 observable 并在需要的地方订阅它。

【讨论】：

【解决方案3】：

您可以尝试使用 Rxjs 中的 map 运算符将值转换为您想要的方式：

对于 Angular 4：

import 'rxjs/add/operator/map';

makeOffer(product: string, offer: number): Observable<number> {
  ...

  return this.http.post('http://localhost/Project/PHP/negotiation.php', formData)
    .map(data => data['counter']);
}

对于 Angular 5+

import { map } from 'rxjs/operators';

makeOffer(product: string, offer: number): Observable<number> {
  ...

  return this.http.post('http://localhost/Project/PHP/negotiation.php', formData)
    .pipe(map(data => data['counter']));
}

然后在你的组件中：

this.serviceName.makeOffer(...)
  .subscribe(counter => console.log(counter));

【讨论】：