Angular 7: отправить ответное сообщение от сервиса - PullRequest
Новая
       9

Angular 7: отправить ответное сообщение от сервиса

0 голосов
/ 16 января 2019

Я делаю запрос из сервисного файла в моем 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;
      }

Эта функция работает очень хорошо. Но я не могу снять свой message в моем HTML. Когда я набираю {{message}} в HTML, он не определен. Я объявил 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;
  }

Ответы [ 3 ]

0 голосов
/ 16 января 2019

Вы не можете получить доступ к полям компонента в сервисе. Вам необходимо каким-то образом передать ответ службы, и только тогда вы сможете использовать этот ответ и на основе этого значения присваивать сообщение и отображать его в своем 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), бизнес-логика или манипулирование данными должны использоваться на некотором промежуточном уровне сервиса или компонента.

Таким образом, вы можете сделать общий сервис отдыха и использовать его во всех приложениях, вам просто нужно передать тело запроса, URL и объект обратного вызова.

Если вы собираетесь писать логику в сервисе, вам придется писать отдельный сервис для каждого вызова API.

0 голосов
/ 16 января 2019

Угловые шаблоны будут искать переменные только в компоненте, который мы в них объявили. Так что внесите изменения, как показано ниже в вашем шаблоне

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

Здесь service - это то, что вы вводите в свой компонент.

Если вы объявите message:string в своем сервисе, это нормально, по умолчанию переменные являются общедоступными, и мы можем получить к ним доступ в шаблонах. Но с помощью служебной переменной мы вводим их через конструктор.

Надеюсь, это решит вашу проблему :)

0 голосов
/ 16 января 2019

Полагаю, ваш пример кода является частью класса обслуживания: вы не можете получить доступ к атрибутам службы, таким как message или message2, из вашего HTML-шаблона.Вы должны вернуть HTTP, наблюдаемый контроллеру, и поместить логику подписки в свой контроллер.

Сервис: 

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

Контроллер:

сообщение: String;

вход (имя пользователя, пароль): наблюдаемый {

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;

}

...