Angular: установить переменную при успехе AJAX

Question

Я работаю над небольшим приложением и играю с angular.У меня возникла эта проблема при нажатии на кнопку я вызываю запрос на получение ajax.В случае успеха ajax я хочу установить переменную для данного результата.Но проблема в том, что переменные не устанавливаются.Мой код следующий ...

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

constructor() {}

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    $.ajax({
      url: queryUrl,
      dataType: "json",
      method: "GET",
      success: function(res) {
        this.searchResult = res;
      },
      error: function() {
        console.log("Error");
      }
    });
  }

  ngOnInit() {}
}

Когда я пытаюсь установить переменную searchResult, она не устанавливается, но когда я консоль регистрирую ответ непосредственно в обратном вызове успеха, он дает мне полный ответ в консоли.Что я делаю не так?

Спасибо

Answer 1

Старайтесь не использовать jquery ajax в угловых

Попробуйте использовать rxjs

https://angular.io/guide/rx-library

Answer 2

Поскольку вы используете ключевое слово this в функции, оно будет указывать на область действия успешной функции, а не на внешнюю область, поэтому не будет обновлять переменную внешней области.Есть два решения этой проблемы

1.Используйте функцию стрелки :

 $.ajax({
      url: queryUrl,
      dataType: "json",
      method: "GET",
      success: (res)=>{
        this.searchResult = res;
      },
      error: function() {
        console.log("Error");
      }
    });
  }

Поскольку функция стрелки не имеет своей области видимости.this в функции стрелки всегда указывает на внешнюю функцию.

2.Скопируйте внешний this в одну из переменных и затем используйте эту переменную вместо this:

Скопируйте this во внешней функции в переменную и затем используйте эту переменную в функции успеха ajax, вв этом случае this будет указывать на правильный контекст

, как показано ниже

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

var that=this; // Copied this into that  variable 
constructor() {}

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    $.ajax({
      url: queryUrl,
      dataType: "json",
      method: "GET",
      success: function(res) {
        that.searchResult = res;// use that instead of this
      },
      error: function() {
        console.log("Error");
      }
    });
  }

  ngOnInit() {}
}

Используйте одно из указанных выше решений, и оно решит вашу проблему

Answer 3

Попробуйте этот способ, используя функцию стрелки

$.ajax({
  url: queryUrl,
  dataType: "json",
  method: "GET",
  success: (res) => {
    this.searchResult = res;
  },
  error: function() {
    console.log("Error");
  }
});

Функции стрелки

, так же как рекомендация держаться подальше от jquery angular имеет httpModule, чтобы отменить все httpзапрос

с настройкой httpClient

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

    constructor(private http: HttpClient) { }

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    this.http.get(queryUrl).subscribe(result => this.searchResult = result );

  }

  ngOnInit() {}
}

HttpClinetModule