Angular: ExpressionChangedAfterItHasBeenCheckedError, когда данные получены с внутреннего сервера без обновления представления

Пожалуйста, потерпите меня, если вы найдете этот вопрос довольно простым, поскольку я новичок в Angular, а также во внешнем программировании и javascript. У меня есть три угловых компонента A, B и C. Шаблон C содержится в шаблоне B и шаблоне B, содержащемся в A. A передает пользовательские данные в B через параметры @Input. Используя введенную информацию, компонент B выполняет вызов API-интерфейса rest, выходные данные которого передаются компоненту C с использованием параметра C @Input. Ожидается, что компонент C отобразит данные.

Если я жестко закодирую отображаемые данные в ngInit () B, я не сомневаюсь в отображении данных в компоненте C. Однако, если я вызываю restAPI, чтобы предоставить данные сервера, я получаю ExpressionChangedAfterItHasBeenCheckedError. Я внимательно посмотрел и понял, что эта ошибка возникает в среде разработки и связана с обнаружением изменений.

Помимо этой ошибки, несмотря на то, что я получаю выходные данные api, мои данные отображения не меняются, даже если остальные выходные данные изменились. Я пробовал использовать ChangeDetectionStrategy.onPush (), changeDetectionRef.detectChanges () и т.д., но не дал положительного результата.

Rest API возвращает ответ, который извлекается в .then (). Ниже приведен остальной вызов API:

return this.http.request(url, options).toPromise()
        .then((response: any) => this.extractData(response))
        .catch((error: any) => this.handleError(error));

Поможет ли блокирующий синхронный вместо асинхронного вызова остальных API?

Не уверен, что мне нужно сделать, чтобы решить эту проблему. Благодарим вас за помощь.