конфликт, используя «это».как получить доступ к переменной вне метода в Angular 6?

Question

Я изучаю Angular 6, и я пытаюсь сделать что-то сверхъестественное.

Я пытаюсь скопировать этот код JS на Angular:

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, я не могу присвоить значение, возвращенное в обещании, внешнему свойству.(Я получаю неопределенное значение, когда пытаюсь его напечатать)

Вот как я безуспешно пытался преобразовать приведенный выше код JS в угловой синтаксис:

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 ключевое слово?Проблема в том, что «это» относится к методу go()?Если так, как я могу указать на свойство obj класса из обещания?Я так потерян.

Спасибо.

Answer 1

Проблема в том, что console.log будет фактически выполняться до завершения this.go().

Но ваша функция this.go() работает нормально, и this.obj будет фактически изменен, но только после того, как fetch завершится и вернется с данными response.json(), что снова произойдет после console.log.

Чтобы убедиться, что ваша логика запускается после завершения fetch, вы должны написать свою логику в функции обратного вызова обещания следующим образом.

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
  }
}

Чтобы лучше понять Обещания, я предлагаю сообщение