Angular 5 HttpClient 向订阅函数返回未定义且无法更改变量

Question

我需要向用户显示一条消息，以便他可以知道他的电子邮件已经存在于我们的数据库中。我有这个方法：

addPartners(partnerName, showMsg)
{
    showMsg = false;
    const headerOptions = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    const body = new HttpParams().set('name', partnerName);
    return this.http.post('http://aff.local/addPartner.php', body, {
          headers: headerOptions
}).pipe(map(
    res=>{

      //console.log(res)
      if(res==null)
      {
        //alert("Your email already exist in our database");
        showMsg = true;
      }
      else{
        showMsg=false;
      }
    },
    error=>{
      console.log("Error: "+ error);
    }
  ))
 }

我运行它在我的组件中点击：

addPartner(){
    this.email = this.subscribeForm.get('emailTxt').value;
    console.log("hi "+this.email);
    this.api.addPartners(this.email, this.showMsg).subscribe(
      (data)=>{
        console.log(this.showMsg);

        this.subscribeForm.reset();
      },
      (error)=>{
        console.log(error)
      }
    );
  }

在DOM中，当showMsg为真时，我会显示消息：

<div class="container" *ngIf="showMsg">
   ...
</div>

我的问题是我总是在 console.log(this.showMsg) 的控制台得到一个 undefined 作为返回值。这就是为什么 showMsg 总是错误的，即使电子邮件已经存在，我应该向用户显示一条消息。

我试图在控制台查看 data 值：

console.log(data);

我仍然在控制台得到 undefined。

我真正想要的是，当我的数据库中已有电子邮件时，将值更改为 true。这是我的 php 脚本以了解更多信息：

public function addPartner($partner_name){
        global $conn;
        //$existingValueMsg = "Email already exists";
        $existingValue = "SELECT * FROM partner WHERE partner_name=:partner_name";
        $execExistingValue=$conn->prepare($existingValue);
        $execExistingValue->bindValue(":partner_name", $partner_name);
        $execExistingValue->execute();
        $execExistingValue->fetchAll();
        $resultNumber = $execExistingValue->rowCount();
        if($resultNumber==0)
        {
            $addParner = "INSERT INTO partner(partner_name, image) VALUES(:partner_name, '')";
            $execAddPartner = $conn->prepare($addParner);
            $execAddPartner->bindValue(":partner_name", $partner_name);
            $execAddPartner->execute();

            return true;
        }
        else
        {
            //return $existingValueMsg;
            return false;
        }
    }

当 false 时，在 typescript 方法中返回的值为 null.

Answer 1

JavaScript 是按值传递。

function increment(i: number) {
  i++;
}

let i  = 0; 
increment(i); 
console.log(i);`

这将总是打印 0。因为 i 的 copy 被传递给 increment()。

使用 map() rxjs 运算符将发出的事件转换为 true 或 false。然后，沉你订阅你的组件，你收到的事件将是真或假，你可以相应地采取行动。

Answer 2

您不需要将 showMsg 传递给您的服务。 showMsg 值不会在您的服务中更新，因为 javascript 是按值传递的，如@JB Nizet 所述。

因此，你应该做的是在你的服务中 return 布尔结果，在你的组件中订阅它，然后将它分配给 showMsg - this.showMsg = data.

可在此处找到演示代码：https://stackblitz.com/edit/angular-bhyab1。参考app component和partner service.

Angular 5 HttpClient 向订阅函数返回未定义且无法更改变量

Angular 5 HttpClient returning undefined to a subscribed function and cannot change a variable

http

httpclient

angular

angular5