Javascript 如何显示http错误消息6

我正在使用以下方法发送数据。我想在我的组件上显示错误响应。如何在组件中记录控制台错误消息

组件。ts

signup(){ 
    return this.loginservice.signupUser(this.model).subscribe(data => {
        console.log(data.error);
    });
}

signupUser(signupuserModel: any = {}):Observable<any>{
    return this.http.post(`${this.signuouserurl}`,signupuserModel)
}

服务ts

signup(){ 
    return this.loginservice.signupUser(this.model).subscribe(data => {
        console.log(data.error);
    });
}

signupUser(signupuserModel: any = {}):Observable<any>{
    return this.http.post(`${this.signuouserurl}`,signupuserModel)
}

signupUser（signupuserModel:any={}）：可观察

signup() { 
  return this.loginservice.signupUser(this.model).subscribe(data => {
    console.log(data);
  }, err => {
    console.log(err);
  });
}

您还可以按以下方式使用try-catch方法

async signup() { 
  try {
    let data = await this.loginservice.signupUser(this.model).toPromise();
    console.log(data)
  } catch (e) {
    console.log(e);
  }
}

但是，并非所有http代码都会引发异常
您可以选择任何方法来显示错误。。当然，最好的方法是使用以下代码来隔离成功和错误响应（为此，您的http调用必须抛出异常，否则您必须选择第二个选项）

或者您可以编写条件代码，如

    signup() { 
          return this.loginservice.signupUser(this.model).subscribe(success => {
            console.log(data);
    if(success.status == 406){ console.log("success")} 
else { console.log("Error ") }
          }
        }

在RxJS中，
subscribe（）
方法可以有3个函数

next（）
如果observable发出值
error（）
如果从可观察对象抛出错误
complete（）

您需要做的是在
subscribe（）
方法内的服务器调用中添加一个额外的箭头函数

public error: any; 

signup() { 
    return this.loginservice.signupUser(this.model).subscribe(success => {
        console.log(success);
    }, error => { // second parameter is to listen for error
        console.log(error);
        this.error = error;
    });
}

如果要在component.html中显示错误，可以使用插值{{}

component.html

<div class="error">{{ error }}</div>

{{error}
console.log（data.error）的输出是什么