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

使用箭头功能尝试这种方式

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

Arrow functions

正如推荐远离jquery的角度一样，已经将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() {}
}

setup HttpClinetModule

Answer 2

尽量不要在angular中使用jquery ajax

尝试使用rxjs

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

Answer 3

当您在函数中使用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() {}
}

使用上述解决方案之一，它将解决您的问题

角度：成功设置变量AJAX

3 个答案: