Question

我从Angular项目中的服务文件发出请求：

signIn(username: string, password: string): Observable<any> {

    const formData = ...
        this.http.post(`${this.uri}`, formData, httpOptions)
          .subscribe(res => console.log(        
              if (statusCode === '0') {
                this.message = 'test';

              } else {
                this.message2 = 'test2';
              }
            })));
        return;
      }

此功能效果很好。但是我无法在HTML中拍摄message。当我在HTML中键入{{message}}时，它是未定义的。我声明了message: String;，但是它不起作用。我猜服务是私有的，这个问题就是这样。

如何显示HTML中的回复？最好的方法是什么？

更新：这是我的组件：

message: String;

signIn(username, password): Observable<any> {

    this.cookieService.deleteAll();

    this.ls.signIn(username, password).subscribe(res =>
      xml2js.parseString(res, function (err, result) {
        const statusCode = ...
        console.log(statusCode); // it getting statusCode
        if (statusCode === '0') {
          this.message = 'test'; //Potentially invalid reference access to a class field via 'this.' of a nested function
        } else {

        }
      }));
      return;
  }

Answer 1

我想您的示例代码是服务类的一部分：您无法从HTML模板访问服务属性，例如message或message2。您必须将可观察到的HTTP返回给控制器，并将订阅逻辑放入控制器。

服务：

return this.http.post(`${this.uri}`, formData, httpOptions);

控制器：

消息：字符串；

signIn（用户名，密码）：可观察的{

this.cookieService.deleteAll();

this.ls.signIn(username, password).subscribe(res =>
  const self = this;
  xml2js.parseString(res, function (err, result) {
    const statusCode = ...
    console.log(statusCode); // it getting statusCode
    if (statusCode === '0') {
      self.message = 'test'; 
    } else {

    }
  }));
  return;

}

Answer 2

您无法访问服务中的组件字段。您需要以某种方式传递服务响应，然后只有您可以使用该响应，并基于为消息分配的值并在html中显示。

我认为您应该使用回调函数，其中将包装http请求的响应，并将其用于服务的外部层。

signIn(username: string, password: string, data:any) {
    const formData = ...
    this.http.post(`${this.uri}`, formData, httpOptions)
        .subscribe(response => {
        data(response);
    }, error => data(// do something here);
}

现在将其用作此类（在我认为的组件中）：

message: String;

this.restService.signIn(userName, password, response => {
    if(response && response.hasOwnProperty('statusCode')) {
        if (response['statusCode'] === '0') {
           this.message = 'test';    
        } else {
           this.message = 'test2';
        }
    }
});

现在您可以使用HTML中的消息

{{message}}

注意

您应始终仅将服务层用于数据传输（如果它是rest / api服务），则应在某些中间服务或组件级别使用业务逻辑或数据操作。

通过这种方式，您可以提供通用的rest服务并在整个应用程序中使用，您只需要传递请求主体，url和响应回调对象即可。

如果要在服务中编写逻辑，则必须为每个api调用编写单独的服务。

Answer 3

角度模板仅在我们在其中声明的组件中搜索变量。模板中的更改如下所示

<p> {{service.message}} </p>

将service注入到组件中。

如果在服务中声明message:string很好，则默认情况下变量是公共的，我们可以在模板中访问它们。但是借助服务变量，我们通过构造函数将它们注入。

我希望这能解决您的问题:)

Angular 7：从服务发送响应消息

3 个答案: