使用 "this" 发生冲突。如何在 Angular 6 中访问方法外部的变量？

Question

我正在学习 Angular 6，我正在尝试做一些超级虚拟的东西。

我正在尝试在 Angular 中复制此 JS 代码：

var x;

function go(){
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json =>{
    x = json;
    console.log(x)
  } )
}

go();

并且我可以成功将返回值赋值给x变量并打印出来

但是，当我尝试在 angular 中执行相同操作时，我无法将承诺中返回的值分配给外部属性。（当我尝试打印它时，我得到了 undefined）

这就是我尝试将上述 JS 代码转换为 Angular 语法的方法，但运气不佳：

import { Component, AfterContentInit } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterContentInit {
  obj;

  go() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json =>{
      this.obj = json;
  })
  }

  ngAfterContentInit() {
    this.go();
    console.log(this.obj) // undefined
  }
}

是否与this关键字有关？ "this" 是指 go() 方法的问题吗？如果是这样，我如何从承诺中指向 class 的 obj 属性？我迷路了。

谢谢。

Answer 1

这里的问题是 console.log 实际上会在 this.go() 完成之前执行。

但是您的函数 this.go() 工作正常并且 this.obj 实际上会被修改，但只有在 fetch 完成并且 return 及其数据 response.json() 之后才会被修改再次发生在 console.log.

之后

为了确保您的逻辑在 fetch 完成后运行，您必须在 promise 回调函数中编写您的逻辑，如下所示。


import { Component, AfterContentInit } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterContentInit {
  obj;

  go() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json =>{
      this.obj = json;
      console.log(this.obj) // runs after `fetch` finishes and will log the modified value.
  })
  }

  ngAfterContentInit() {
    this.go();
    console.log(this.obj) // this will run before `this.go()` you have to wait for it to finish.
// result is undefined
  }
}

为了更好地理解 Promise，我建议这样做 post

使用 "this" 发生冲突。如何在 Angular 6 中访问方法外部的变量？

conflict using "this". how to access a variable outside a method in Angular 6?

typescript

angular

angular6