Обещания в Angular: бесконечные звонки при прямом возвращении

Question

Я больше знаком с Observables, чем Promises, поэтому я играл с обещаниями в моем файле .ts:

response = {};

constructor(private http: HttpClient) {
}

ngOnInit() {
  this.getCallback();
}

async getCallback() {
  console.log("getCallback: calling backend");
  this.response = await this.http.get(this.apiURL).toPromise();
  console.log("getCallback: got answer")
}

async getCallback2() {
    console.log("getCallback2: calling backend");
    const ret = await this.http.get(this.apiURL).toPromise();
    console.log("getCallback2: got answer");
    return ret;
}

и моем файле .html:

<code><pre> {{ response | json}} 

{{ getCallback2() | json}} 

Это два разных способа отображения возврата от (тривиального) внутреннего вызова.Я вижу, что первый способ (использование this.response для сохранения результата) работает должным образом: одиночный вызов бэкэнда и отображение правильного возврата.Пока getCallback2() бесконечно вызывает бэкэнд и не отображает ожидаемого возврата.Это конфликт с обнаружением изменений на стороне DOM?Я не могу понять, почему я наблюдаю два разных поведения ..

Answer 1

Как только вы добавите Angular-выражение в View, например {{expression}}, оно будет добавлено для просмотра списка текущей области.

Angular использует механизм, называемый грязной проверкой, для архивирования двусторонней привязки.Каждый раз, когда происходят какие-то определенные события, Angular будет проходить через список наблюдения, чтобы проверить, изменилось ли отслеживаемое значение, это действие называется дайджест-циклом.

Здесь некоторые конкретные события состоят из пользовательского ввода, изменения модели, запросы http завершаются и т. д. Поскольку в выражении используется функция getLink, каждый раз, когда Angular запускает грязный цикл проверки / дайджеста, эта функция будет выполняться еще раз, чтобы проверить, изменился ли ее возвращаемый результат.

Проблема в том, что функция getCallback2 здесь представляет собой http-запрос, после выполнения которого Angular вызовет еще одну круглую грязную проверку, которая снова выполнит эту функцию ... Bang, это бесконечный цикл.