Angular 8 Http Post 从订阅中获取布尔值

Question

我试图从 subscribe 的布尔值 true/false 中获取价值，但我无法获取价值，这是我目前使用的。

我的 http post 的旧方法。

this.http.post(HostedPathConst.HostedPath + `CompanyProfile/UpdateCustomersStatus`, fData)
.subscribe(data => this.Success(data), err => this.Error(err)); 

this.Success(data) 和 this.Error(err) 是现在调用的方法，我尝试获取数据的新方法是这样。

const fData = new FormData();
fData.append('Id', Id.toString());    
fData.append('IsActive', IsActive.toString());
const test = this.http.post(HostedPathConst.HostedPath + `CompanyProfile/UpdateCustomersStatus`, fData)
  .subscribe(data => {
    this.Success(data);
    this.Switch = IsActive;
    return this.Switch;
  },
    err => {
      this.Error(err);
      this.Switch = !IsActive;
      return this.Switch;
    });
    console.log(test);//Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
    console.log(this.Switch);//undefined at first then gives opposite result like true gives false and vice versa

作为 this.Switch = IsActive; 获取数据的布尔值，它首先返回 undefined，然后返回值 false 而不是 true反之亦然。

Answer 1

因为我理解你的问题是因为异步的东西，所以我要在这里写一个解释。简单来说，您不知道异步操作何时结束。例如，当您执行 http 功能时，您正在与服务器通信，因此您不知道服务器何时会响应（因为连接速度慢，流量大，或者可能是因为您要求操作繁重）。

为了解决这个问题，我们使用了使用观察者模式的 subscribe() 方法。因此，这里的重点是因为您不知道服务器或操作（如线程）何时完成订阅并继续关注任何更改或答案。当你收到它时，订阅里面的代码就会执行。

您可以在此处了解有关观察者模式的更多信息：https://en.wikipedia.org/wiki/Observer_pattern#:~:text=The%20observer%20pattern%20is%20a,calling%20one%20of%20their%20methods。 和这里的异步理论：https://en.wikipedia.org/wiki/Asynchrony_(computer_programming)

对于您的问题，您可以将值初始化为 false，并将复选框值设置为 [(ngModel)]="Switch"，这样当 switch var 更新时，复选框也会更新！

Answer 2

由于它是一个可观察的，您不会立即得到响应。所以控制台在成功和错误块内记录 this.Switch 。试试下面的sn-p

const fData = new FormData();
fData.append('Id', Id.toString());    
fData.append('IsActive', IsActive.toString());
const test = this.http.post(HostedPathConst.HostedPath + `CompanyProfile/UpdateCustomersStatus`, fData)
  .subscribe(data => {
    this.Success(data);
    this.Switch = IsActive;
    console.log("Success", this.Switch);
    return this.Switch;
  },
    err => {
      this.Error(err);
      this.Switch = !IsActive;
      console.log("Error", this.Switch);
      return this.Switch;
    });

我不确定这是否会解决您的问题，但肯定会有助于调试以获得您的解决方案。

注意：你得到undefined at first then gives opposite result like true gives false and vice versa的原因是你在成功或错误块之外安慰this.Switch，这将主要返回未定义的第一个和任何预分配的值。由于 this.Switch 是全局范围变量。

Answer 3

使用async 和await 获得结果，并且成功了。

const test = await this.http.post(HostedPathConst.HostedPath + `CompanyProfile/UpdateCustomersStatus`, fData)
                 .toPromise().then((data)=>{
                  this.Switch = IsActive;
                  return this.Switch;
                 }).catch((error)=>{
                  this.Switch = !IsActive;
                  return this.Switch;
                 });
    console.log(test); //Same result as below
    console.log(this.Switch); //Same result as above