如何显示http错误消息angular 6

Question

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

组件.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)
}

错误信息

Answer 1

在 RxJS 中，subscribe()method 可以有 3 个函数

1. next() 如果 observable 发出值。
2. error() 如果 Observable 抛出错误
3. complete() 如果 observable 完成。

你需要做的是在你的服务器调用里面的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 中显示错误，你可以使用插值 {{ }}

组件.html

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