Angular: ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после того, как оно было проверено на ng 4

Была такая же проблема с использованием redux. Вот ссылка на выпуск, который я разместил в их репозитории. Когда на angular 2 ошибок нет, но на angular 4.2.2 я получаю изменение выражения после того, как были проверены ошибки.
https://github.com/angular-redux/store/issues/428

Проблема возникает у меня на моих компонентах при переходе с 4.1.3 на 4.2.x. Возврат к 4.1.3 решает проблему для меня, но я не хочу оставлять это навсегда.

Я мог бы воспроизвести на минимальном проекте, я все еще пытаюсь понять, как исправить эту (возможно) регрессию. Но похоже, что в dev. режим с 4.2.х. Но в журнале изменений это не совсем ясно. Любые чаевые приветствуются.

У меня такая же проблема после обновления с 4.1.3 до 4.2.3. Использование setTimeout устраняет проблему.

из:

PanictUtil.getRequestObservable (). Subscribe (data => this.requesting = data);

кому:

PanictUtil.getRequestObservable (). Subscribe (data => setTimeout (() => this.requesting = data, 0));

@jingglang, не могли бы вы попытаться воспроизвести проблему на http://plnkr.co/edit/tpl : AvJOMERrnz94ekVua0u5 с минимально возможным кодом?

У меня та же проблема - обновлено с 2.4 до 4.2, и часть моей логики скрытия / отображения теперь не работает. Это логика в стиле аккордеона, где видимость зависит от сравнения текущей панели с наблюдаемым, который указывает, какая панель должна быть видимой (среди прочего). Компонент использует @select для получения наблюдаемого и связан с | async в шаблоне - работал как шарм в версии 2.4, теперь получаем ошибку ExpressionChangedAfterItHasBeenCheckedError, и панели не скрываются и отображаются при первом щелчке, только при втором.

У меня такая же проблема при обновлении с 4.1.3 до 4.2.2.

Но я нашел обходной путь.
Внедрение ChangeDetectionRef и вызов функции detectionChanges() в точке ошибки.

constructor(private cdr: ChangeDetectionRef) {
}

onChange(): void {
  this.val += 1; // <- get error after
  this.cdr.detectionChanges();
}

Я думаю, что это проблема следующего изменения, внесенного в 4.2.

https://github.com/angular/angular/pull/16592

чтобы решить эту проблему: https://github.com/angular/angular/issues/14321

Есть ли у вас какой-либо контент внутри тега ng-content ?

У меня такая же проблема с формой внутри тега ng-content которая теперь выдает ошибку ContentChangedAfter.

У меня такая же проблема при обновлении с 4.1.3 до 4.2.0 или выше

Прилагаю небольшой проект по воспроизведению ошибки

app-error.zip

После этого я понизил версию до 4.1.3 (как было сказано выше), и ошибка исчезла, так что какой бы конфликт ни был, он специфичен для 4.2. У меня нет времени собрать plunkr на этой неделе (или на следующей), но, похоже, это связано с одним действием, обновляющим две отдельные наблюдаемые в магазине, каждая из которых влияет на пользовательский интерфейс. Одно из обновлений пользовательского интерфейса происходит, другое вызывает исключение.

Хммм,
Определенно откат до версии 4.1.3 решает проблему, а также применяет тайм-аут, как показано @jingglang.

привет @tytskyi. Я сделал plunkr http://plnkr.co/edit/XAxNoV5UcEJOvsAbeLHT для этой проблемы. надеюсь, это поможет.

обходной путь, указанный @jingglang, работает (для меня) на 4.2.0 или выше
ИЛИ также изменение испускающего события дочернего элемента в его конструктор больше не вызывает ошибку

@umens Вы обновляете родительский компонент после того, как он был проверен, поэтому вы не сохраняете однонаправленный поток данных

@alexzuza, как я могу этого добиться? Я всегда делал это без ошибок. Почему установка SetTimout больше не вызывает ошибки. (Я обновил plunkr) Я сомневаюсь, что это мешает жизненному циклу или нет?

привет @umens, спасибо за @alexzuza : вы обновляете поле родительского компонента после того, как оно было проверено. Ваш код примерно эквивалентен этому: http://plnkr.co/edit/ksOdACtXScZKw3VRAYTm?p=preview (обратите внимание, что я удалил службу, чтобы уменьшить код).
Почему это сработало? Вероятно, случайно здесь была ошибка в старой версии angular или Rxjs. Подскажите, пожалуйста, какие версии использовались? Или вообще поставить в рабочий плункер?

Почему установка SetTimout больше не вызывает ошибки.

Потому что вы меняете поле асинхронно, что учитывает односторонний поток данных.

Давайте рассмотрим это с противоположной стороны: почему возникает ошибка? Первая проверка обнаружения изменений идет сверху вниз. Он проверяет значение app.toolsConfig привязанное к шаблону. Затем он отображает <child-cmp> который синхронно обновляет app.toolsConfig . Рендеринг завершен. Теперь он запускает вторую (только в режиме разработки) проверку обнаружения изменений, чтобы убедиться, что состояние приложения стабильно. Но app.toolsConfig до рендеринга потомка не равно app.toolsConfig после. Все это происходит за один «ход», «цикл» обнаружения изменений.

Хорошо. спасибо за подробный ответ. Я не мог найти информацию о том, когда происходит жизненный цикл дочернего компонента.
для предыдущей "рабочей" версии я использовал:
@ angular / *: 4.1.1 (кроме compiler-cli -> 4.1.0)
rxjs: 5.3.1

@umens здесь воспроизводится ошибка со старыми версиями, которые вы упомянули: http://plnkr.co/edit/kfoKmigXzFXwOGb2wyT1?p=preview. Он выдает, так что, вероятно, на поведение повлияла какая-то сторонняя зависимость или неполная инструкция воспроизведения?

не могу сказать.
вот мой yarn.lock, если вы хотите пойти дальше: https://pastebin.com/msARLta1
но я не знаю что может быть по другому

Я вижу похожие ошибки «ExpressionChanged ...» после переключения с 4.1.2 на 4.2.3 .

В моем случае у меня есть два компонента, которые взаимодействуют через службу. Услуга предоставляется через мой основной модуль, и ComponentA создается до ComponentB .

В 4.1.2 следующий синтаксис работал нормально без ошибок:

Шаблон ComponentA:

<ul *ngIf="myService.showList">
...

ComponentB Класс:

ngOnInit() {
  this.myService.showList = false; //starts as true in the service
  ...
}

В 4.2.3 мне нужно изменить шаблон ComponentA следующим образом, чтобы избежать ошибки «ExpressionChanged ...»:

Шаблон ComponentA:

<ul [hidden]="!myService.showList">
...

Я все еще пытаюсь понять, почему это только что стало проблемой, и почему переключение с *ngIf на [hidden] работает.

У меня такая же проблема, и чаще всего это происходит, когда я использую такой асинхронный канал:
<div>{{ (obs$ |async).someProperty }}</div>
Если я использую это так:

<div *ngIf="obs$ | async as o">
  <div>{{ o.someProperty }}</div>
</div>

Затем ошибка исчезает, поэтому я не уверен, что это только потому, что многие люди сделали ошибку, которая не была обнаружена раньше: я думаю, что ошибка появилась в 4.2 ...

Такая же проблема у меня. Похоже, проблема исходит от @ angular / router

Я тоже пришел к выводу, что это связано с роутером. Пытался опубликовать столько же вчера, но похоже, что публикация не удалась. Я исследовал дальше и упростил код, чтобы увидеть, смогу ли я отследить ошибку. Следующий код отлично работает, когда конечным источником действия является щелчок по заголовку панели, но дает сбой с ошибкой ExpressionChanged при запуске через маршрутизацию.

<span class="glyphicon pull-right" [ngClass]="{'glyphicon-chevron-up' : (ui$ | async)?.visiblePanels[VisiblePanel.IngredientTypes], 'glyphicon-chevron-down' : !((ui$ | async)?.visiblePanels[VisiblePanel.IngredientTypes])}"></span>

Это помогло мне решить проблему! Вы должны явно инициировать изменение родительского элемента.

Как и @acidghost , я мог решить эту проблему, запустив ChangeDetectorRef#detectChanges в AfterViewInit из моего родительского компонента.

Если у вас есть репро plunkr, я готов проверить его, потому что у нас были похожие жалобы на gitter, и это всегда приводило к проблеме пользователя.

Не могу быть уверенным, была ли ошибка введена в версии 4.2 или скорее в отсутствии ошибки в версии <4.2, и она была устранена в версии 4.2.

Ошибка: ExpressionChangedAfterItHasBeenCheckedError
решение:
componentRef.changeDetectorRef.detectChanges ();

Ниже приведен фрагмент моего кода (динамически сгенерированные компоненты):
componentRef = viewContainerRef.createComponent (componentFactory); // компонент создан
(componentRef.instance) .data = input_data; // вручную изменяем данные компонента здесь
componentRef.changeDetectorRef.detectChanges (); // это приведет к обнаружению изменений

Для простых компонентов просто погуглите, как получить доступ к "componentRef", а затем выполните
componentRef.changeDetectorRef.detectChanges ();
после установки / изменения данных / модели компонента.

Решение 2:
Я снова получал эту ошибку при открытии диалогового окна «this.dialog.open (DialogComponent)».
поэтому размещение этого открытого диалогового кода внутри функции и последующее применение setTimeout () к этой функции решило проблему.
пример:
openDialog () {
let dialogRef = this.dialog.open (DialogComponent);
}
ngOnInit (): void {
setTimeout (() => this.openDialog (), 0);
}
хоть вроде хак .. работает !!!

Начиная с версии 4.2 у меня такая же проблема, и у меня не сработало ни одно решение или обходной путь :( Я создаю компонент динамически с помощью фабрики компонентов в методе ngAfterViewInit. Этот компонент использует директиву, которая имеет поле @Input() . Я связываю это в статическую строку. Похоже, что поле @Input() директивы не определено до тех пор, пока представление компонента не было построено и проверено, и только затем инициализировано статической строкой.

https://plnkr.co/edit/E7wBQXm8CVnYypuUrPZd?p=info

staticComponent.ts

export class StaticComponent implements AfterViewInit {
  @ViewChild('dynamicContent', {read: ViewContainerRef})
  dynamicContent: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit(): void {
    const componentFactory: ComponentFactory<DynamicComponent> = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.dynamicContent.createComponent(componentFactory);
  }
}

test.directive.ts

@Directive({
  selector: '[testDirective]'
})
export class TestDirective {
  @Input()
  testDirective: string;
}

dynamic.component.ts

@Component({
  selector: 'dynamic-component',
  template: `<div [testDirective]="'test'">XXX</div>`
})
export class DynamicComponent {
}

ERROR Ошибка: ExpressionChangedAfterItHasBeenCheckedError: выражение было изменено после проверки. Предыдущее значение: undefined. Текущее значение: «тест». Кажется, что представление было создано после того, как его родительский элемент и его дочерние элементы были проверены. Был ли он создан в ловушке обнаружения изменений?

Я немного смущен, читая эту ветку. Это известная ошибка, которая будет устранена в следующем выпуске? Или это ожидаемое поведение? Если да, то какое решение? Спасибо.

Не знаю, связано это или нет, но я страстно ненавижу это сообщение! это проявляется ТОЛЬКО при модульном тестировании с готовой командой 'ng test'. Полагаю, я мог просто запутаться в том, как успешно имитировать простой сервис. Также удивлен, что никто еще не видел этого в тестировании, не могу найти ничего, связанного с тестами. Я буду следить за этой темой и любыми поисковыми запросами ExpressionChangedAfterItHasBeenCheckedError + unit testing.

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

Я создал небольшой образец приложения, используя урезанные версии тех же редукторов, объединенных в том же порядке, что и в реальном приложении, с последним routerReducer. К моему разочарованию, ошибки не произошло. Итак, я установил точки останова и наблюдал за потоком действий через редукторы. Я обнаружил, что два приложения отправляют действия в обратном порядке.

Мой редуктор пользовательского интерфейса управляет видимостью и является источником изменения состояния, вызывающего ошибку. Вот урезанная версия редуктора с соответствующими действиями:

export const userInterfaceReducer = (state = INITIAL_UI(), action: any) => {
    switch (action.type) {
        case IngredientActions.LIST_INGREDIENTS:
            if (action.hideTypes) {
                return Object.assign(state, { visiblePanel: VisiblePanel.Ingredients });
            }
            return state;
        default:
            return state;
    }
}

Когда я запускаю это в своем небольшом тестовом приложении, оно работает - сначала срабатывает действие LIST_INGREDIENTS и возвращается новое состояние; затем срабатывает действие @ angular-redux / router :: UPDATE_LOCATION, и применяется регистр по умолчанию, возвращающий то же состояние.

Когда я запускаю его в реальном приложении, порядок или действия меняются на обратный. Сначала срабатывает действие @ angular-redux / router :: UPDATE_LOCATION, возвращающее старое состояние по умолчанию. Затем срабатывает LIST_INGREDIENTS, возвращая новое (измененное) состояние - и возникает ошибка.

Я полностью открыт для мысли, что я сделал что-то глупое, и это не настоящая ошибка, но если да, то кто-нибудь еще видит, что я сделал?

(В качестве сноски, я проверил версию 4.1.3 ... и она также запускает редукторы redux в `` правильном '' порядке, то есть изменение местоположения срабатывает после действия списка ингредиентов, что, предположительно, поэтому оно работает, но версия 4.2 нет).

Возникает такая же досадная ошибка, когда один компонент изменяет свойство службы. Решено перемещением * ngIf в родительский компонент. Так что это определенно ошибка

смог обойти это, используя метод ngDoCheck () и вызвав метод ChangeDetectorRef.detectChanges.

public ngDoCheck(): void {
    this.cdr.detectChanges();
}

@pappacurds Не делай этого. Этим вы вызвали бесконечные циклы обнаружения изменений.

здесь может быть такая же ошибка https://plnkr.co/edit/IeHrTX0qil17JK3P4GBb?p=preview

ошибка: previous undefined after undefiend

после обновления такая же ошибка

Мне то же

В 4.0.0 все нормально, после обновления до 4.2.6 получаю ту же ошибку.

В статье Все, что вам нужно знать об ошибке ExpressionChangedAfterItHasBeenCheckedError подробно объясняется, почему возникает эта ошибка, и возможные исправления.

исправления очевидны, но изменение структуры таким образом, что обновление вызывает переписывание пользовательских приложений для «поддержки» нового второстепенного обновления платформы. JS все еще поддерживает старые ошибки, чтобы поддерживать совместимость ...

Такая же ошибка здесь

Я также вижу эту проблему в ~4.2.4 . Переход на ~4.1.3 решил проблему.

Проблема заключается в изменении значений ContentChildren , даже при использовании ChangeDetectorRef detectChanges() в конце AfterViewInit родителя (где он вносил изменения). Как ни странно, эта проблема возникает только с компонентами, а не с директивами. Я преобразовал директиву, с которой работал в 4.2.4, в компонент с шаблоном <ng-content></ng-content> а затем он начал выдавать ошибку ExpressionChangedAfterItHasBeenCheckedError .

Я получил это при работе с контролем ввода материала 2. Пытался установить значение этого

ngAfterViewInit(): void {
this.numberFormControl.setValue(200);
}

Я собрал простой Plunker, показывающий случай, когда ошибки ExpressionChangedAfterItHasBeenCheckedError начали появляться только начиная с Angular 4.2.x .

Я создал простой плункер, показывающий ошибку при изменении значения ContentChild даже при использовании ChangeDetectorRef detectChanges() в ngAfterViewInit родительского компонента.

Изменить: также создан простой плункер на основе моего первого примера, но с родительской директивой вместо компонента и без ошибок.

@saverett Я вижу другое сообщение об ошибке с вашим планшетом

@JSMike У меня был точно такой же случай, как и в вашем плункере (обошел его, обернув код, ссылающийся на ContentChild в setTimeout , плункер )

@JSMike Спасибо за внимание. Похоже, проблема с angular / zone.js # 832. Я установил версию zone.js на 0.8.12, пока они не исправят последнюю версию zone.js. Plunker должен снова работать.

@matkokvesic - это не совсем решение, это просто приводит к тому, что изменение происходит вне ловушки жизненного цикла. Приведенный пример кода не вызывает ошибки при использовании Angular v4.1.3.

@JSMike Я согласен, это временное решение. Использование элементов, на которые ссылается ContentChildren в ngAfterViewInit отлично работало до Angular 4.2.6.

Я создал Plunker для ошибки, описанной в https://github.com/angular/angular/issues/17572#issuecomment -311589290

https://plnkr.co/edit/E7wBQXm8CVnYypuUrPZd?p=info

Я исправил это, используя changeDetection: ChangeDetectionStrategy.OnPush и this.changeDetector.markForCheck(); в моем коде

@touqeershafi, если вы используете this.changeDetector.markForCheck(); , разве это не значит, что вы используете вещи неправильно?

Это все еще происходит. Это определенно ошибка, а не ожидаемое поведение, и ее следует исправить.

@istiti, я понимаю, что это неправильный способ, но, по крайней мере, вы можете временно избавиться от этой ошибки. Но что касается моего проекта, я уже добавил TODO с URL-адресом ошибки.

Это все еще происходит. Это определенно ошибка, а не ожидаемое поведение, и ее следует исправить.

Я думаю, что должен согласиться с @rwngallego ... Перед обновлением 4.2.x я уже написал несколько компонентов многоразового использования / ng-content, которые зависят от @ViewChildren , @ContentChildren и создают отношения между родителем и дочерним

Мне постоянно приходится вставлять экземпляр ChangeDetectorRef во все эти конструкторы (включая дочерние классы, расширяющие эти компоненты), и это не похоже на предполагаемое или правильное поведение.

Для тех, кто использует динамический компонент, такой как @saverett (при использовании маршрутизатора используется динамический компонент), я думаю, что проблема указана здесь https://github.com/angular/angular/issues/15634.

Для всех, кто вносит изменения внутри ngAfterViewInit / ngAfterViewChecked я думаю, это ожидаемо.

Для остальных (здесь еще не видел) для меня это загадка.

Для меня это происходит по следующему сценарию.
Имейте родительский компонент, который использует дочерний компонент. Дочернему компоненту нужны данные, которые предоставит родительский элемент, но эти данные поступают из результата обещания в родительском конструкторе. Так:

родитель

constructor {
dataservice.getData().then((result) => {
this.source = result;
});
}

Родительский шаблон

<app-child [source]="source"></app-child>

дочерний компонент

@Input() source:any[];

Этот код вызывает эту ошибку, однако добавление ее к родительскому компоненту решило проблему:

constructor(private cdRef: ChangeDetectorRef) {
dataservice.getData().then((result) => {
this.source = result;
 this.cdRef.detectChanges();
});
    }

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

@sulhome ... ваша проблема в том, что обещание в родительском конструкторе меняет @Input на дочернем компоненте ... во время цикла CD и его подтверждения в режиме разработки. В этом причина ошибки.

Строка this.cdRef.detectChanges(); добавляет второй цикл CD, поэтому подтверждение после него было успешным и => без ошибок.

Так что все работает как положено. Важно понимать, как использовать правильные конструкции и общую логику в коде, чтобы избежать подобных проблем. Вы можете прочитать об этом в подробном объяснении здесь: https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

@ mlc-mlapis, значит, вы говорите, что я все делаю правильно, добавляя this.cdRef.detectChanges(); и что это не имеет никаких последствий?
Я подумал, что, слушая ngOnChanges на дочернем элементе, я должен выбрать изменение в ngOnChanges предназначен для

@sulhome Да, this.cdRef.detectChanges(); - это то, что помогает, но это также приводит к тому, что у вас теперь есть 2 компакт-диска ... так что все зависит от того, как и где вы используете стратегию OnPush для компонентов, чтобы устранить накладные расходы еще один цикл CD.

Если верно, что dataservice.getData принимает некоторые данные с использованием http, то, вероятно, самым простым решением было бы иметь наблюдаемый объект в этой службе и подписываться на него из дочернего компонента. Поэтому, когда данные будут отправлены в поток, ребенок может на них отреагировать.

@ghetolay для записи, бывают случаи, когда это ошибка, см. например # 18129, который я открыл.

У меня возникает эта проблема, когда я получаю данные из дочернего компонента с помощью @Output.

в родительском компоненте home.ts

drag_second(trigger){ console.log("dragged222222"+trigger); if(trigger){ this.isactive=true; }else{ this.isactive=false; } }
и home.html
<div class="upper" [ngClass]="{'isactive':isactive}">

isactive меняется при dragstart и dragend ....

сообщение об ошибке
ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после проверки. Предыдущее значение: «истина». Текущее значение: false.

или есть ли другие способы изменить / добавить атрибут класса?

Та же проблема в 4.2.x и 4.3.0, но не в 4.1.x.

Ошибка возникает только на маршрутах, которые используют ng-template .

Решение: Помещение всего кода из ngAfterViewInit в setTimeout решило проблему для меня (спасибо @jingglang).

public ngAfterViewInit(): void {
    setTimeout(() => {
        //my code
    });
}

@Wernerson , взгляните на комментарий JSMike о setTimeout. Важно отметить, что на самом деле вы просто меняете код за пределами ловушки жизненного цикла.

Моя проблема заключалась в том, что я использовал ActivatedRoute params Observable для изменения некоторого состояния в ngOnInit() . Кажется, что Router испускает params синхрон, поэтому обновление происходит во время CD.
Мое простое решение в настоящее время:

  // !!! see delay(0)
  // results are consumed by async Pipe, where I also had the CD issue (null vs. undefined)
  this.results = this._activatedRoute.params.delay(0)
    .do(params => this.searchParameters = this._createSearchParameters(params))
    .switchMap(p => {
      let key = this.searchParameters.key();
      return this._searchResultCache.results.map(r => r.get(key));
    });

(Я знаю, что это не самый красивый реактивный / функциональный код на свете;))
Итак, решение заключалось в том, чтобы delay(0) выбросить параметр на один tick .

Надеюсь, я смогу помочь другим, у которых есть подобные проблемы.
Также приветствуются любые опасения, насколько мое решение неправильное или опасное.

Каков статус этой проблемы? Это все еще очевидно в Angular 4.2.6.
Это проблема в производственных сборках? Поскольку эта ошибка возникает только в отладочных сборках.

Я ненавижу все обходные пути с ручным запуском обнаружения изменений или даже запуском его в setTimeout () ...

setTimeout() неэффективен, поскольку вызывает новый цикл обнаружения изменений во всем приложении, тогда как detectChanges() проверяет только текущий компонент AFAIK.

У моей команды было принципиальное непонимание того, что такое ngOnInit, а что нет. Документы говорят

ngOnInit() : Инициализируйте директиву / компонент после того, как Angular сначала отобразит свойства с привязкой к данным и задает входные свойства директивы / компонента. Вызывается один раз после первого ngOnChanges ().

Мы подписывались на наши сервисы (отслеживающие состояние приложения) с ngOnInit . Наши подписки - это синхронные BehaviorSubjects; они срабатывают во время подписки. Итак, «после того, как Angular сначала ... устанавливает свойства ввода директивы / компонента», мы сразу же меняли значения. Вот очень простой Plunker, показывающий, что это проблема.

В примере из Tour Of Heroes в конечном итоге используется асинхронный http, поэтому проблем не возникает. Думаю, в этом и заключается наша путаница.

Теперь мы подписываемся на наши синхронные состояния из нашего конструктора, так что значения наших компонентов будут установлены немедленно. Другие участники этого потока предложили запустить второе обнаружение изменений с помощью тайм-аутов, установить значения позже или явно указать angular сделать это. Это предотвратит появление ошибки, но, вероятно, в этом нет необходимости.

Обязательно прочтите статью, @maximusk : все, что вам нужно знать об ошибке ExpressionChangedAfterItHasBeenCheckedError .

По крайней мере, эта ветка должна привести к подробному предупреждению обо всем этом в официальных документах по angular.

Обязательно прочтите статью, @maximusk : Все, что вам нужно знать об ошибке ExpressionChangedAfterItHasBeenCheckedError.

Спасибо

@adamdport

Работает ли это в случае использования @ContentChildren для изменения дочерних свойств родительского

Имейте в виду, что частично эта проблема является подтвержденной ошибкой, а не ошибкой пользователя:
https://github.com/angular/angular/issues/15634

Проблема, которую адресовал ошибку вызывало использование *ngIf .

* смотрю ...

Это может произойти, если вы передаете объекты в диалоговое окно Angular Material, а затем в диалоговом окне используете их напрямую, а не выполняете this.myDataInput = Object.assign({}, dialogDataInput) . Т.е. this.myDataInput = dialogDataInput; а затем что-то вроде this.myDataInput.isDefault = !this.myDataInput.isDefault; . Как объяснялось выше, дочерний компонент (диалог) изменяет значения, которые отображаются в представлении родительского компонента.

заменить атрибут на [атрибут]

Кто-нибудь знает наверняка, намеренная это ошибка или баг?
Неправильно ли загружать данные в ngOnInit? Потому что, если я перемещаю код в конструктор (загрузка через Observable), ошибка не возникает ...

@ Вернерсон . У вас в html есть * ngIf? будьте осторожны, что что-то будет отображаться после завершения ngOnInit , solong, все внутри * ngIf не будет работать и может привести к этой ошибке.

Его нужно переработать. Это сообщение об ошибке появляется при использовании "ngIf" и пользовательских элементов управления. Тайм-аут, конечно, не решение.

@ j-nord, если бы вы читали комментарии, вы бы знали, что timeout не требуется.

@ j-nord / @dgroh Я испытал то же самое. Я использую ng-hint, который использует директиву ngIf, и я не могу избавиться от этой ошибки. Удалось ли вам реализовать обходной путь?

@Wernerson да, часть этой проблемы является умышленной ошибкой или багом: https://github.com/angular/angular/issues/15634

@ mawo87 у меня работал со скрытым, поскольку он не удаляет элемент из DOM. Для нашего требования это было нормально и также было чистым решением.

@ mawo87
Сначала вам нужно найти переменную, о которой идет речь в сообщении об ошибке. @Angular Team : Было бы неплохо, если бы имя переменной было в сообщении об ошибке. Это непросто найти с помощью более крупных масок и Webpack. Если вы нашли команду, в которой это происходит, поможет команда в следующей строке:

this.cdr.detectionChanges();

См. Пример с vermilion928 от 19 июня.

Спасибо @dgroh и @ j-nord.
@ j-nord Я также смотрел на метод detectChanges, но, возможно, я не буду использовать этот подход, поскольку в следующей статье его не рекомендовали:
https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

В моем случае я использую службу PageTitle и подписываюсь на нее в родительском компоненте, а затем, когда дочерние компоненты загружаются в представление, они устанавливают PageTitle в службе, а родительский элемент получает значение и отображает его через подписку. Это работало без ошибок в 4.1.x, но вызывало ошибку ExpressionChangedAfterItHasBeenCheckedError в 4.2x и новее.

Все по-прежнему работает, как ожидалось, и ошибки не отображаются в развернутых / производственных сборках (из-за отсутствия второго цикла обнаружения изменений), но при разработке в моей консоли очень много красного цвета.

Мне до сих пор крайне неясно, какое (даже краткосрочное) исправление. Мои подписки на родительский компонент находятся в конструкторе, а обновления дочерних компонентов через службу находятся в ngOnInit.

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

@alignsoft, если бы вы установили заголовок страницы в дочерних компонентах в ngOnInit, я считаю, что ошибка действительна ... См. статью, на которую была ссылка ранее.

@alignsoft Я согласен, вокруг этой ошибки было много дискуссий, но без реальных четких инструкций о том, действительна она или нет ... это больше «предупреждение» разработчикам о стандартах и ​​привязке / манипуляции данными?

В моем конкретном случае я имею дело с родительскими / дочерними компонентами, используя @ViewChild и @ContentChild , и приходится снова и снова вызывать detectChanges (), чтобы ошибка не отображалась в консоли ...

@rolandoldengarm Я пробовал подписаться в родительском конструкторе и установить значения в AfterViewInit в дочерних компонентах, но все равно получаю сообщение об ошибке. Это правильный способ справиться с этим на основе цикла обнаружения потока и изменений, и ошибка потенциально является ошибкой?

Пожалуйста, было бы здорово получить здесь какой-то официальный ответ ...

Глядя на это снова. Похоже на мой пример из https://github.com/angular/angular/issues/17572#issuecomment -315096085
должен был использовать AfterContentInit вместо AfterViewInit при попытке манипулировать ContentChildren в рамках жизненного цикла компонента.

Вот обновленный plnkr с AfterContentInit и без ошибок: http://plnkr.co/edit/rkjTmqclHmqmpuwlD0Y9?p=preview

@JSMike Я изменил AfterViewInit на AfterContentInit , все та же ошибка. Даже если я обновляю свои данные внутри OnInit возникает ошибка. Насколько я знаю, это соответствует правильному жизненному циклу Angular (верно?) Для инициализации данных во время OnInit . Вместе с тем фактом, что этой ошибки не было в предыдущих версиях, я предполагаю, что это ошибка. Однако я хотел бы получить какое-то заявление от команды разработчиков, если это так ..? : D

@Wernerson, вы не должны обновлять данные внутри ngOnInit если данные не доступны в этом хуке жизненного цикла. Вы должны переместить свою логику в ngAfterContentInit если она имеет отношение к дочерним элементам содержимого.

@JSMike Не помогло, ошибка все еще возникает. Я просто подписываюсь на изменение состояния в приложении после получения запрошенных данных (асинхронно) в ngAfterContentInit .

@Wernerson у вас есть пример plnkr?

Базовый пример с StackBlitz
Дочерний компонент генерирует событие, а родительский компонент обновляет локальную переменную.
Получите ошибку в консоли js:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'hello world'.

Выяснилось, что ngAfterContentInit работает только в том случае, если дочерние элементы статичны, он все равно не работает при создании дочерних элементов с использованием *ngFor http://plnkr.co/edit/rkjTmqclHmqmpuwlD0Y9?p=preview

@soldiertt вам просто нужен detectChanges () https://stackblitz.com/edit/angular-qfu74y

@JSMike, если я это сделаю, ngAfterViewInit дочернего компонента не запускается: https://stackblitz.com/edit/angular-bdwmgf

@soldiertt, что кажется странным, но похоже на отдельную проблему, о которой следует сообщить.

@JSMike Моя установка довольно сложна со службами, сторонними библиотеками, конфиденциальной информацией и т. Д. И т. Д. К сожалению, я не смог воспроизвести ошибку в плункере: /

У меня сработало внедрение ChangeDetectorRef!

У меня есть эта проблема в карусели, потому что мне нужно установить какое-то свойство в компоненте элемента карусели, свойство, которое известно только после вычисления в родительском компоненте карусели. И все элементы проходят через ng-content , поэтому я могу работать только с элементами в ngAfterContentInit родительского компонента карусели. Что-то вроде:
карусель:

@ContentChildren(ItemComponent) carouselItems;

ngAfterContentInit() {
  // ... some computations
  this.carouselItems.forEach((item: ItemComponent, currentIndex) => {
    item.setPropertyX(someComputedValue);
    // OR:
    item.x = someComputedValue; // of course, this would work as well
  });
}

вещь:

setPropertyX(value) {
  this.x = value;
}

Помимо взлома setTimeout() , будет ли единственное другое решение - использовать службу и тему, чтобы элементы взаимодействовали с родительской каруселью? Я имею в виду, что это было бы смешно ... Это означало бы, что если у меня будет 100 элементов в карусели, то у меня будет 100 подписок. И это удваивается, если у меня есть две карусели. Неужели это не рекомендуемый способ ?! Правильно?

Чаще всего нам нужно установить некоторые свойства для наших компонентов, свойства, которые не могут быть известны до AfterContentInit ... И во многих случаях (когда мы не говорим об 1 или 2 компонентах, таких как это, а скорее 50 или 100, как в карусели) иметь десятые или сотни подписок было бы смешно.

Есть ли какая-нибудь действительно крутая часть Angular, которая может мне здесь помочь, но которую я еще не обнаружил?

PS Я также попытался ввести ChangeDetectorRef и использовать detach() как для компонента карусели, так и для компонента элемента. Я ожидал, что это исправит ошибку, так как, ну ... Я в основном говорю: "_screw изменение, мне это вообще не нужно. Пожалуйста, пожалуйста: не обнаруживайте НИКАКИХ изменений _" ... но ошибка все равно выдается! Итак, в чем смысл метода detach() , если он не выполняет то, что говорит?

constructor(private cdr: ChangeDetectorRef) {
  this.cdr.detach();
}

setTimeout() не является обязательным для взлома, это может быть очень правильный способ делать что-то, например, когда вы реагируете на просмотр, чтобы обновить его, например: изменение привязок шаблона во время ngAfterViewInit .

Проблема в том, что вы используете его как магию, даже не зная почему. Но есть вполне допустимый сценарий, когда использование setTimeout() является правильным способом.

@ghetolay Разве не взломать жизненный цикл компонента (ов), который оценивает система обнаружения изменений? Я пошел по маршруту ChangeDetectorRef.detectChanges (), но это даже кажется мне взломом ... если любое из этих решений «приемлемо», я полагаю, нам придется с этим жить, но это действительно ломает любой использование модификации ViewChild (ren) или ContentChild (ren)

@fugwenna

Разве не взломать жизненный цикл компонента (ов), который оценивает система обнаружения изменений?

Я не понимаю этого вопроса. вырваться из жизненного цикла?

Angular будет запускать цикл CD каждый раз, когда происходит асинхронное событие (событие dom, xhr, setTimeout и т. Д.), Во время этого CD он обновляет представление. ngAfterViewInit hook запускается после этого, поэтому больше не планируется запускать CD, и он не будет запускаться снова, пока не произойдет другое асинхронное событие. Использование setTimeout() - самый простой способ снова запустить его. Вы, конечно, можете сделать это самостоятельно, но я думаю, что выгода незначительна.

@ghetolay Я @JSMike и некоторых других прочитанных мной тем:

@matkokvesic - это не совсем решение, это просто приводит к тому, что изменение происходит вне ловушки жизненного цикла. Приведенный пример кода не вызывает ошибки при использовании Angular v4.1.3.

Поэтому я думаю, что использование setTimeout () приведет к тому, что ловушка жизненного цикла будет «пропущена» или не будет оцениваться, как обычно?

@ghetolay @fugwenna как насчет метода detach() из ChangeDetectorRef ? Есть предположения? Разве это не должно полностью отключить обнаружение изменений и тем самым устранить ошибку? Не понимаю, почему не работает? Или ошибка возникает "независимо" от этого? Это означает, что Angular не заботится о том, что мы отключили обнаружение изменений, его заботит только то, что мы изменили свойство после того, как оно было установлено?
Если люди все еще спорят о том, что «ExpressionChangedAfterItHasBeenChecked» является ошибкой или нет, возможно, это определенно ошибка ... На мой взгляд, Angular больше не должен заботиться о том, чтобы мы меняли свойства после того, как они были установлены, если мы полностью отключено обнаружение изменений. Особенно так, как я это сделал, для родительского компонента и всех других дочерних компонентов, в основном во всем дереве.

Я немного потерялся здесь, одна из моих проблем заключается в том, что я не уверен, как бы я мог даже делать некоторые очень распространенные вещи, не вызывая исключения в режиме разработки.

Например, я написал компонент средства доступа к контрольному значению, который инкапсулирует датпикер. Я скармливаю этому компоненту пустую модель, которая передается внутри datepicker, который инициализирует его и отправляет обратно через зарегистрированную функцию. Конечно, дети изменяют модель во время ее инициализации, но я этого хочу! Я хочу вернуть инициализированную модель, но не выполнять инициализацию в родительском элементе, потому что именно datepicker понимает, как это сделать.

Вопрос в том, как мне это сделать сейчас? Вызвать setTimeout и снова запустить обнаружение изменений? Использовать ChangeDetectorRef? Мне это не нравится, потому что это действительно затрудняет чтение кода. Инициализировать вещь в отдельной службе? Но эта услуга служит только очень техническим целям без какой-либо коммерческой ценности, и я даже не уверен, что это решит проблему.

@fugwenna Меня больше всего беспокоило то, что он работал в 4.1.3 и теперь не работает. Я еще не видел, чтобы кто-нибудь из команды angular вмешивался в вопрос, следует ли нам использовать setTimeout в наших функциях инициализации и позволить зонам взять верх, но это похоже на анти-шаблон по сравнению с тем, как это работало раньше.

@ kavi87 Итак, этот вопрос о stackoverflow фактически дал мне изящное решение, в котором я нуждался. Это должно было сделать эмиттер событий в моем дочернем компоненте async :
new EventEmitter(true)

Для проблемы, помеченной как регресс, с 109 комментариями, эта проблема разочаровывающе тиха с любым официальным словом.

Хотя все здесь хорошо работают с техниками самопомощи, я хотел бы знать, действительно ли это ошибка или просто какое-то новое поведение, реализованное в версии 4.2.x и новее? Если так, это должно было быть указано как критическое изменение (и, следовательно, не второстепенный выпуск?)

@MrCroft
Я не уверен, что полное отключение обнаружения изменений, чтобы заглушить исключение, - хороший способ спуститься, хотя теоретически я понимаю, как это должно / могло иметь смысл.

Я согласен с @JSMike и @rosslavery в отношении очень небольшого ответа или объяснения того, почему это сообщение об ошибке появилось в сообщении 4.2x без какой-либо документации о критических изменениях ... однако еще одна озадачивающая часть этого заключается в том, как оно, по-видимому, только добавлено режим разработки, который больше похож на предупреждение о прерывании обнаружения изменений (?)

Im мой компонент приложения, у меня есть div.
Единственная цель этого div - показать занятый оверлей.
Состояние занятости запускается внутри класса службы http:

app.component.html

<!-- Busy Overlay -->
<div *ngIf="busy$ | async"
     class="overlay">
    <i class="loading">
        <i><sk-wave></sk-wave></i>
    </i>
</div>

app.component.ts:

  get busy$(): Observable<boolean> {
    return this.catolService.busy$;
  }

После обновления до 4.3.4 я всегда получаю ExpressionChangedAfterItHasBeenCheckedError, когда служба запускает состояние занятости.

Есть ли исправление для этого простого асинхронного сценария?

@ emazv72 ... эта демонстрация stackblitz / plunker такая же, как и ваш случай? https://stackblitz.com/edit/angular-2p2h9s?file=app%2Fapp.component.ts или https://plnkr.co/edit/RPOxSVnXvM1TqKp0peSY?p=preview

@mukunku Спасибо, я попробую.

@ mlc-mlapis Я немного изменил ваш плункер, мой код точно https://plnkr.co/edit/uUT7tiM5BKPIy2upJPhb?p=preview

но плункер не показывает проблемы. Я попытаюсь обновиться до последней версии 4.x, чтобы посмотреть, исправлено ли это.

благодаря

Привет всем - извиняюсь за задержку.

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

Плункер @saveretts - хорошая копия этого, чтобы пройтись по нему (спасибо!) - https://plnkr.co/edit/fr7rTNTCgEhHcbKnxAWN?p=preview

Основная идея заключается в том, что Angular всегда работал таким образом - обнаружение изменений выполняется сверху вниз (или родительский -> дочерний) за один проход. Итак, если у нас есть:

@Component({ 
  selector: 'app-root',
  template: `
    <!-- initially falsey -->
    <div *ngIf="sharedService.someValue">NgIf Block</div>
    <child-comp></child-comp>
  `
})
class AppRoot {
  constructor(public sharedService:SharedService){}
}

@Component({ 
  selector: 'child-component',
  template: `child comp`
})
class ChildComponent {
  constructor(public sharedService:SharedService){}
  ngOnInit(){
    this.sharedService.someValue = true;
  }
}

Обнаружение изменений сначала запускается для корневого приложения, проверяет все его привязки, а затем обнаруживает изменения дочернего компонента - опять же, потому что мы делаем это за один проход (а не в стиле AngularJS, продолжаем проверять до стабильного состояния), родительская привязка (* ngIf в данном случае) не проверяется повторно - теперь ваше приложение находится в несогласованном состоянии (!)

В режиме разработки мы фактически запускаем это обнаружение изменений дважды - второй раз, когда он запускается, проверяет, что привязки не изменились (что указывало бы на несогласованное состояние), и выдает ошибку, если такая проблема обнаружена. Вы можете проверить это поведение, вызвав enableProdMode() в репро: https://plnkr.co/edit/GGEzdxK1eHzHyGiAdp56?p=preview. Обратите внимание, что ошибка не возникает (потому что мы не запускаем CD x2), но приложение оказывается в несогласованном состоянии (отображается дочерний элемент, но не * ngIf), что является плохой вещью.

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

Я бы сказал, что обычно код, который нарушает этот односторонний поток (как это делает приведенная выше реплика), неверен . Однако есть случаи, когда вам может потребоваться такое поведение (на самом деле, у нас есть аналогичная настройка в библиотеке форм Angular). Это означает, что вам нужно явно запустить еще один прогон обнаружения изменений (который вернется к корневому компоненту и проверит сверху вниз). Вызов setTimeout позволяет добиться этого, хотя обычно для этого лучше использовать Promise - см. Https://plnkr.co/edit/IoKMxEOlY9lY9LcWwFKv?p=preview

Надеюсь, это поможет!

@robwormald Эта же ошибка Я не уверен, решит ли это проблему с ContentChildren . Почему директива может без ошибок изменять значения дочерних элементов во время AfterContentInit, но при этом в компоненте возникают ошибки?

Кроме того, ожидается ли, что если cdr.detectChanges() вызывается во время одного процесса инициализации, другие функции инициализации не будут вызваны? Это то, что было обнаружено в этой теме, для чего я создал отдельную проблему .

@robwormald

Я считаю, что @JSMike прав в оценке того, что эта ошибка все еще возникает во время сценариев, когда односторонний поток исходит от Parent-> Child с использованием ContentChild (ren) и ViewChild (ren).

Приемлемо ли учитывать то, что я сказал раньше , то есть эта ошибка больше похожа на «предупреждение», в котором говорится, что разработчик идет против «наилучшей практики» одностороннего потока, но не вызывает ошибок, нарушающих работу приложения, поскольку обнаружение изменений выполняется только один раз в производственном режиме (в реальном мире)?

@fugwenna Нет, это действительно ошибка, поскольку в противном случае представление остается в несогласованном состоянии. Образец, который просматривает Роб, говорит обо всем.

Также есть эта цитата из документов

Правило однонаправленного потока данных Angular запрещает обновление представления после того, как оно было составлено. Оба этих крючка срабатывают после того, как представление компонента составлено.

Если вам действительно нужно что-то там изменить, используйте для этого один из асинхронных методов. setTimeout может подойти Promise.resolve().then(() => Assignment = here)

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

Спасибо за подробное объяснение @robwormald. Я все еще не понимаю, почему поток дочерних → родительских данных все еще работает при использовании привязки [hidden] а не *ngIf (см. Https://plnkr.co/edit/L4QWK5pTgF1qZatFAN4u?p = предварительный просмотр). Есть идеи, почему это все еще работает, не давая ExpressionChangedAfterItHasBeenCheckedError ?

Angular использует функцию checkAndUpdateView для обнаружения изменений.

Краткое представление этой функции могло бы выглядеть так:

function checkAndUpdateView(view) {
    // update bound properties and run ngOnChanges/ngOnInit/ngDoCheck for child directives
    updateDirectives
    // check all embedded views that belong current view
    execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
    // update DOM for the current view
    updateRenderer
    // perform checkAndUpdate for all child components
    execComponentViewsAction(view, ViewAction.CheckAndUpdate);
}

Он выполняется рекурсивно благодаря методам execEmbeddedViewsAction и execComponentViewsAction . А также ключевым моментом здесь является угловая проверка встроенных представлений после проверки директив и перед обновлением DOM.

Чтобы упростить пример @saverett, я буду использовать следующий шаблон

<div *ngIf="!sharedService.displayList">Some text</div>
<router-outlet></router-outlet>

https://plnkr.co/edit/OdkzHjEXbEd3efYAisFM?p=preview

Мы уже знаем, что *ngIf - это просто десахар. Так

<ng-template [ngIf]="sharedService.displayList">
  <div>Some text</div>
</ng-template>
<router-outlet></router-outlet>

Мы можем представить себе следующую структуру:

  my-app
     |
   NgIf directive
       NgIf EmbeddedView
   RouterOutlet directive

Что делает директива RouterOutlet ?

Он вводит маршрутизируемый компонент в ViewContainerRef

activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null) {
    ...
    this.activated = this.location.createComponent(factory, this.location.length, injector);

Это означает, что router-outlet создает EmbeddedView поэтому после инициализации директивы RouterOutlet у нас есть два встроенных представления в нашем представлении AppComponent .

  my-app
     |
   NgIf directive ([ngIf]="sharedService.displayList")
       NgIf EmbeddedView
   RouterOutlet directive 
      BComponent EmbeddedView

Проиллюстрируем это на картинке

Теперь вернемся к нашей основной функции

function checkAndUpdateView(view) {
    // update bound properties and run ngOnChanges/ngOnInit/ngDoCheck for child directives
    updateDirectives
    // check all embedded views that belong current view
    execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
    ...
    // update DOM for the current view
    updateRenderer
    ...
}

Angular выполнит проверку в следующем порядке:

NgIf directive ([ngIf]="sharedService.displayList") updateDirectives(1)
      NgIf EmbeddedView   execEmbeddedViewsAction(2)
RouterOutlet directive 
      BComponent EmbeddedView  execEmbeddedViewsAction(3)

Наша директива NgIf будет проверена первой (здесь запоминается sharedService.displayList=false ), а затем будет вызван метод NgOnInit внутри BComponent (где мы меняем sharedService.displayList to true ) И когда angular выполняет checkNoChanges он вызывает ошибку Expression has changed after it was checked

Затем заменим *ngIf на [hidden] . Теперь у нас будет только одно встроенное представление, вставленное RouterOutlet а наш [hidden]="sharedService.displayList" будет проверяться в updateRenderer

  my-app
     |
   div{Some Text} just a node
   RouterOutlet directive 
      BComponent EmbeddedView

Angular выполнит такую ​​проверку:

function checkAndUpdateView(view) {
    // check all embedded views that belong current view
    execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);   BComponent.ngOnInit (1)
    ...
    // update DOM for the current view
    updateRenderer   update hidden binding (2)
    ...
}

Таким образом, привязка свойства dom не вызовет ошибку, потому что мы обновились после вызова ngOnInit value.

В этом основное различие между структурной директивой *ngIf и привязкой свойства dom [hidden]

Спасибо за подробный обзор @alexzuza! Это было очень полезно!

setTimeout () действительно сработал для меня :) Спасибо @jingglang :)
.subscribe (данные => setTimeout (() => this.requesting = данные, 0))

@robwormald здесь прав. У меня была такая же проблема, и ее было труднее обнаружить, потому что я использовал NGRX и наблюдаемые. Проблема заключалась в том, что на разных уровнях иерархии маршрутов были контейнеры компонентов, которые подписывались на состояние хранилища. Как только я переместил компоненты контейнера на тот же уровень в моем функциональном модуле, проблема исчезла. Я знаю, что это своего рода запутанный ответ, но если вы используете шаблон контейнера / компонента NGRX, надеюсь, это направит ваше расследование в правильном направлении.

С setTimeOut это работает, спасибо @jingglang
ngAfterViewInit () {
this.innerHeight = (window.innerHeight);
setTimeout (() => this.printPosition (), 0);
}

@alexzuza , это происходит не только для ngIf, это происходит (по крайней мере, для меня) также с [ngClass]

@ Ninja-Coding-Git Я только что описал конкретный случай. Я знаю, что это может случиться с любым кодом.

Для меня вызов ChangeDetectorRef после изменения элемента решил проблему:

import { Component, ChangeDetectorRef } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message: string = 'loading :(';

  constructor(private _cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.message = 'all done loading :)'
    this._cdr.detectChanges();
  }

}

Решение найдено здесь

привет @thetylerb! не могли бы вы подробнее рассказать об этом. Мы используем ngrx, и я просто не знаю, как это компенсировать. Я думаю, что использовать обещания поверх наблюдаемых довольно неудобно.

@ piq9117, вы также можете взглянуть на этот комментарий https://github.com/angular/angular/issues/18129#issuecomment -326801192 Я рассказал о взаимодействии между обнаружением изменений и ngrx, я полагаю, это может быть полезно

@victornoel спасибо! Это в значительной степени описывает нашу ситуацию. У нас есть вложенные неизменяемые структуры данных (immutablejs), и мы везде используем асинхронные каналы. Мои первоначальные мысли заключались в том, что хранилище изменит дерево компонентов, когда хранилище будет гидратировано, а дерево компонентов просто компенсирует это изменение и выполнит другое изменение Обнаружение 😓

У нас есть вложенные неизменяемые структуры данных (immutablejs), и мы везде используем асинхронные каналы. Мои первоначальные мысли заключались в том, что хранилище изменит дерево компонентов, когда хранилище будет гидратировано, а дерево компонентов просто компенсирует это изменение и выполнит другое changeDetection.

В моем проекте у нас есть какая-то нормализованная структура данных (вместо вложенных структур данных), так что она немного смягчает подобные проблемы, пока этого не произойдет! : O

Вы только надеетесь:

• изменение структуры данных хранилища таким образом, чтобы изменения одной части не вызывали обновления других частей
• будьте осторожны, чтобы не запускать события от дочерних элементов компонентов, которые слушают хранилище через асинхронный канал
• запуск обнаружения изменений вручную при запуске вышеупомянутых событий
• запускать это событие в другое время или в setTimeout

Я использую ngrx и получил такую ​​ситуацию:

В app.component.html:
<div *ngIf='(appState | async).show'>test</div>
И в app.component.ts
this.appState= this.store.select("app");

Конечно, в этой ситуации я получаю сообщение об ошибке, но когда я добавляю логический флаг в компонент, подобный этому:
app.component.html -> <div *ngIf='show'>test</div>
app.component.ts ->
this.appState.subscribe((state: AppState) => { this.show= state.show; })

Ошибка исчезла, мне конечно понятно почему, но хочу знать ваше мнение, хорошее ли это решение? Какие плюсы и минусы ??

Не использую ngrx, но у меня проблема с простой проверкой с помощью querySelectorAll let chips = [].map.call(document.querySelectorAll('li.chip'), this.chipVisible);

Решение @bogdancar с ChangeDetectorRef.detectChanges() подавляет ошибку, но было бы неплохо не импортировать ChangeDetectorRef, исправляя в первую очередь то, что вызывает ошибку.

У меня такая же проблема, когда я использую rxjs в angular 4.4.4. Я просто подписываюсь на наблюдаемый объект, предоставляемый службой DI. Моя работа ниже:

this.eventBroadcastService.getCustomEvent({type: 'loginOpen'}).subscribe(e => { setTimeout(() => { this.isBlur = true; }, 0); });

Я использую setTimeout для работы. Теперь работает, но это сложно. Я не чувствую себя хорошо.

ngOnChanges (changes: SimpleChanges | any) помогает

Проблема была исправлена ​​просто после перемещения логики динамического изменения параметров внутрь метода ngDoCheck ().
ngDoCheck(): void { this.checkValid = this.sourceArr.includes((this.chanedVal).toUpperCase()); }

@ asrinivas61 Я думаю, что это действительно плохая идея. ngDoCheck часто вызывается Angular, и если ваш sourceArr содержит много данных, это может повредить вашей производительности.

См. Https://angular.io/guide/lifecycle-hooks#other -angular-lifecycle-hooks

Я бы предпочел сейчас использовать ngAfterViewInit с setTimeout :

setTimeout(_ => /* your code here */, 1000);

пример:

  public ngAfterViewInit(): void {
    // We use setTimeout to avoid the `ExpressionChangedAfterItHasBeenCheckedError`
    // See: https://github.com/angular/angular/issues/6005
    setTimeout(_ => this.isLoadingInProgress = false, 1000);
  }

@dgroh вам не нужно добавлять фактический тайм-аут, вам просто нужно, чтобы js выполнял ваш код в следующей асинхронной задаче, что означает еще один запуск обнаружения изменений.

@victornoel Я почти не верю, что это будет работать с наблюдаемыми, если вы явно не вызовете detectChanges of ChangeDetectorRef . Я бы хотел, чтобы все это не понадобилось.

@dgroh, ты, должно быть, неправильно меня понял, я просто выступал за то, чтобы написать:

public ngAfterViewInit(): void {
    // We use setTimeout to avoid the `ExpressionChangedAfterItHasBeenCheckedError`
    // See: https://github.com/angular/angular/issues/6005
    setTimeout(_ => this.isLoadingInProgress = false);
  }

Нельзя ли добавить шаг после ngAfterViewInit как setTimeout ? (например: ngAfterViewLoad )

@ aks4it , похоже, это работает, но мне бы хотелось подробнее узнать, как это работает? Является ли код генерации динамических компонентов синхронным?

Официальная демонстрация plunker из angular docs имеет ту же ошибку. Не могли бы вы исправить это там? :) Благодаря

@luckylooke

  ngAfterViewInit() {
    //this.loadComponent();
    this.getAds();
  }

это работает?

Я не понимаю вашего требования, но вам действительно нужен интервал в 3 секунды? если да, это работает, и даже если вы хотите напрямую вызвать loadComponent, мне это удается:

ngAfterViewInit() {
    setTimeout(()=>{this.loadComponent()},0)
  }

@istiti Я смог исправить это с помощью обходного пути ChangeDetectorRef , поставив detectChanges() после ... data = data

Но поскольку он взят из официальных документов, мне было любопытно официальное решение проблемы. Не тайм-аут или ChangeDetectorRef.

Извините, я был слишком краток в первом посте ... Я хотел указать на серьезность проблемы, так как даже угловые документы имеют то же самое в коде.

Просто к вашему сведению, я не уверен, что здесь действительно вызывает, но ошибки исчезли, когда я включил режим prod в main.ts
`enableProdMode ()

// если (environment.production) {

// enableProdMode ();

//} `

"@ angular / core": "^ 4.2.4"
"машинописный текст": "~ 2.3.3"

@bakthaa ... это предполагаемое поведение, потому что контрольная проверка ( @Inputs() ), которая вызывается после каждого цикла CD, вызывается только в режиме разработки, а не в производственном режиме приложения Angular. Таким образом, проблема скрыта в производственном режиме, но она все еще существует ... и, вероятно, может быть источником различных нежелательных или вводящих в заблуждение побочных эффектов в производственном режиме.

Я использую Angular 5, мне удалось решить эту проблему, введя компонент ChangeDetectorRef в компонент и заставив его обнаруживать изменения.

    constructor(private changeDetector: ChangeDetectorRef) {}

    ngAfterViewChecked(){
      this.changeDetector.detectChanges();
    }

@ Sabri-Bouchlema ... да, это один путь ... но все же вам следует еще раз подумать ... почему компонент @Inputs изменяется в течение одного цикла компакт-диска ... и решить, логика верна ... и это правда, что в 95% случаев код можно изменить, чтобы избежать проблемы без вызова дополнительных detectChanges() .

Использование angular 5.1.2. Я получаю эту ошибку при открытии диалогового окна материала в ngAfterViewChecked. Как сообщил @ aks4it , мне пришлось обернуть код в setTimeout, чтобы он заработал.

У меня такая же проблема с версией 4.01
ng-version = "4.0.1

То же самое и с angular 4.4.6

Исправить с помощью this.changeDetector.detectChanges();

Я написал этот плункер с использованием шаблонных переменных и не понимаю, почему у меня есть ExpressionChangedAfterItHasBeenCheckedError. Если я изменю порядок в своих компонентах, ошибка исчезнет:

https://plnkr.co/edit/Mc0UkTR2loI7wgmLAWtX

Я пробовал changeDetector.detectChanges, но не работает

@AlexCenteno ... потому что логика оценки идет сверху вниз ... и свойство value для comp1 @Input() public value:String=null; сначала устанавливается comp2.value ... <div comp1 [value]="comp2.value"></div> который пока установлен на Hello через собственный @Input() ... все в течение одного цикла компакт-диска ... поэтому повторная проверка если входные данные для дочерних компонентов такие же, как и в начале цикла CD в режиме разработки, обнаруживает изменение в свойстве value на comp1 .

привет @ mlc-mlapis спасибо за ваше время. Значит, ошибки не избежать? Я думаю, это то, о чем мне не стоит беспокоиться, когда я вызываю enableProdMode?

@AlexCenteno ... да, в режиме prod проверка после цикла CD не запускается ... но это не значит, что вас это должно устраивать. Вы должны применить другую логику передачи дочерних компонентов value cross. Также существует проблема, что <div> не имеет свойства value . Почему вы вообще используете атрибутный компонент? Почему не просто:

<comp1 [value]="comp2.value"></comp1>
<comp2 #comp2 value="Hello"></comp2>

потому что тогда использование @Output() на <comp2> будет нормальным и позволит вам обновить [value] на comp1 без каких-либо ошибок.

Использование [email protected] с angular@5 standart store.select throw warning ExpressionChangedAfterItHasBeenCheckedError в режиме разработки и некорректная работа в режиме прод. Отгрузка и отбор на разных уровнях / контейнерах.

@Component({
  ...
  template `
  ...
      <div [ngClass]="{
        'home__sidenav': true,
        'home__sidenav--active': (isActiveSidenavMenu$ | async)
      }">
  ...
  `
})
export class HomeContainer {
  isActiveSidenavMenu$ = this.store.select(fromHome.isActiveSidenavMenu);
  ...
}

Этот подход удаляет предупреждающее сообщение, но он кажется более сложным:

@Component({
  ...
  template `
  ...
      <div [ngClass]="{
        'home__sidenav': true,
        'home__sidenav--active': isActiveSidenavMenu
      }">
  ...
  `
})
export class HomeContainer {
  isActiveSidenavMenu$ = this.store.select(fromHome.isActiveSidenavMenu);
  isActiveSidenavMenu;

  ngOnInit() {
    this.isActiveSidenavMenu$.subscribe(res => {
      this.isActiveSidenavMenu = res;
      this.cd.detectChanges();
    });
  }
}

Есть идеи, как правильнее решить эту проблему?

@rimlin вы пробовали просто подписаться на магазин напрямую?

ngOnInit() {
  this.store.select(fromHome.isActiveSidenavMenu)
    .subsbrice(res => {
      this.isActiveSidenavMenu = res;
    });
}

Думаю, у меня была похожая проблема. и, избегая async в шаблоне, проблема решена.

@ piq9117 спасибо за совет, попробовал ваше решение, кажется более понятным с меньшим количеством кода, но здесь также нужно вызвать this.cd.detectChanges(); , иначе просмотр не будет обновляться.

ngOnInit() {
    this.store.select(fromHome.isActiveSidenavMenu).subscribe(res => {
      this.isActiveSidenavMenu = res;
      this.cd.detectChanges();
    });
}

Я использую Angular 5.2, что-то подобное делал. Работает на меня

constructor(private changeDetector: ChangeDetectorRef) {}

ngAfterViewInit(){
  this.changeDetector.detectChanges();
}

Использование Angular 5.2, исправлено с помощью detectChanges ()

Да, мы исправили это с помощью маршрута detectChanges () (Angular 5.1). Я здесь со многими другими, хотя они думают, что это всего лишь обходной путь, и его не следует рассматривать как ответ в долгосрочной перспективе. Должен быть еще один крючок жизненного цикла, который можно будет использовать.

Запуск совершенно нового цикла обнаружения изменений для разрешения подобных изменений кажется неоптимальным.

Кажется, это продолжается и продолжается, хотя все ответы и советы уже были опубликованы выше.

1. Правильный способ исправить это - перестроить архитектуру / реструктурировать компоненты и обработку данных для работы с одним проходом обнаружения изменений сверху вниз. Это означает, что ни один дочерний компонент не может изменять значение, которое используется в шаблоне родительского компонента. Еще раз оцените то, что вы создали, и убедитесь, что данные текут только в одном направлении, вниз по дереву компонентов. Это может быть так же просто, как перемещение вашего кода из ngAfterViewInit в ngOnInit в некоторых случаях.
2. this.changeDetectorRef.detectChanges(); - официальный и признанный способ справиться с этим менее чем в 5% случаев, когда первый шаг является проблематичным.

Прочие примечания:

1. Будьте очень осторожны при выполнении каких-либо действий в ngAfterViewInit как изменение значений, используемых в DOM, может вызвать эту ошибку.
2. Будьте очень осторожны при использовании любого из хуков жизненного цикла Check или Checked поскольку они могут вызываться в каждом цикле обнаружения изменений.
3. setTimeout может обойти это, но предпочтительны два решения выше.
4. Игнорирование этой ошибки в режиме разработчика и удовлетворение тем, что производственный режим «исправляет» ошибку, недопустим, как описано выше. Эти проверки не выполняются в режиме prod, но ваш код режима prod по-прежнему оставляет изменения незамеченными, что приводит к рассинхронизации представления и данных. В некоторых случаях это может быть безвредно, но при игнорировании может привести к повреждению данных / представлений и еще более серьезным проблемам.
5. Односторонний поток данных на самом деле не сильно изменился в Angular, поэтому публикация того, что вы это сделали в версии X Angular, не слишком помогает.
6. Добавление дополнительных перехватчиков или состояний жизненного цикла не является решением этой проблемы. Разработчики просто добавляли код, который нарушает односторонний поток данных, в эти хуки и запускал ту же ошибку.

Наконец, просто помните, что эта ошибка не указывает на проблему с Angular. Эта ошибка здесь, чтобы сообщить вам, что вы сделали что-то не так в своем коде и что вы нарушаете одностороннюю систему потока данных, которая делает Angular быстрым и эффективным.

Посты выше и многие посты в блогах более подробно рассматривают этот вопрос, и их стоит прочитать, поскольку вы должны понимать эту одностороннюю модель потока данных и то, как создавать компоненты и передавать данные внутри нее.

@Splaktar Было бы лучше заблокировать эту проблему (и удалить меня), чтобы сделать вышеупомянутый комментарий выдающимся? Нить уже становится слишком длинной, и большинство из них просто повторяются. 😃

@Splaktar Вы указываете: «Это означает, что ни один дочерний компонент не может изменять значение, которое используется в шаблоне родительского компонента».

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

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

Это не соответствует подходу «снизу вверх», поскольку родительский элемент получит все соответствующие данные из службы и отправит любую информацию, требуемую дочерними компонентами, вниз через одностороннюю связь.

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

Это неправильно?

И никогда не забывайте, что есть подтвержденная ошибка:
https://github.com/angular/angular/issues/15634

@ Martin-Wegner См. Https://github.com/angular/angular/pull/18352#issuecomment -354170352

@alignsoft ... у вас есть простое воспроизведение вашего дела и задачи в виде Stackblitz? Потому что похоже, что на дело должно повлиять нечто другое, а не только описанная вами логика.

@trotyl решения от @Splaktar не связаны с моей простой проблемой здесь https://github.com/angular/angular/issues/17572#issuecomment -311589290 или?

@ Martin-Wegner ... в вашем случае достаточно заменить ngAfterViewInit на ngOnInit hook.

@alignsoft , как сказал @ mlc-mlapis, пример Stackblitz был бы очень полезен для демонстрации правильной архитектуры для этого случая. Это вполне возможно при использовании правильного набора сервисов, наблюдаемых, перехватчиков жизненного цикла и т. Д. Этот конкретный случай также может стать хорошей темой для StackOverflow.

@Splaktar Как только я

@ mlc-mlapis вау спасибо, работает :)

@alignsoft , сегодня я создавал приложение, которое ведет себя точно так же, как вы описали. @ mlc-mlapis, вы можете найти урезанный пример на stackblitz . Если вы нажмете «Система CMS» в левой навигационной панели, будет выдано исключение ExpressionChangedAfterItHasBeenCheckedError .

В этом примере компонент admin.component действует как родительский компонент, отвечающий за 3 вещи:

• отображение левого навигатора
• верхний тикер, который подкомпоненты могут использовать для отображения своего собственного тикера
• раздел основного содержимого, который отображает данные, относящиеся к подкомпоненту, через <router-outlet></router-outlet> .

Родительский компонент

<div class="ticker-container" *ngIf="tickedMessage !== ''">
  <h1>{{tickedMessage}}</h1>
  <button type="button" (click)="tickedMessage = ''">
    close
  </button>
</div>

<div class="side-nav">
  <h2>side nav</h2>
  <ul>
    <li><a routerLink="/">dashboard</a></li>
    <li><a routerLink="/apps/thirdpartycms">CMS System</a></li>
  </ul>
</div>
<div class="main-content-container">
  <router-outlet></router-outlet>
</div>

export class AdminComponent implements OnInit, OnDestroy {
  private _tickedMessageSubscription: Subscription;

  tickedMessage: string = '';

  constructor(
    private router: Router,
    private adminService: AdminService
  ) { }

  ngOnInit() {
    /* 
      On the side nav if you click on CMS System, this piece of code throws the exception: 
      "ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed 
       after it was checked. Previous value: 'false'. Current value: 'true'.""
    */
    this._tickedMessageSubscription = this.adminService.tickedMessageAnnounced$.subscribe((tickedMessage: string) => {
      this.tickedMessage = tickedMessage;
    });
  }

  ngOnDestroy() {
    this._tickedMessageSubscription.unsubscribe();
  }
}

Исследуя, как передать данные обратно родительскому компоненту при использовании <router-outlet></router-outlet> , я прочитал, что если я использую @Output для отправки данных обратно родительскому компоненту, директива router-outlet завершится обработка события. Поскольку это настраиваемое событие, директива router-outlet не знает, как его обработать. Поэтому я пропустил этот метод. Как только я прочитал об общих сервисах на angular.io, я написал свой собственный:

Общий сервис

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class AdminService {

  private _tickedMessageAnnounced = new Subject<string>();

  tickedMessageAnnounced$ = this._tickedMessageAnnounced.asObservable();

  announceTickedMessage(tickedMessage: string) {
    this._tickedMessageAnnounced.next(tickedMessage);
  }
}

Как только один из дочерних компонентов называется this.adminService.announceTickedMessage(this._tickedMessage); :

Дочерний компонент

import { Observable } from 'rxjs/Observable';
import { Component, ViewChild, OnInit, Inject } from '@angular/core';
import { AdminService } from '../../../core/admin/admin.service';

@Component({
  selector: 'cms',
  templateUrl: './thirdparty-cms.component.html',
  styleUrls: ['./thirdparty-cms.component.scss'],
})
export class ThirdPartyCmsComponent implements OnInit {
  private _tickedMessage: string;
  constructor(private adminService: AdminService) { }

  ngOnInit(): void {
    this._tickedMessage = 'Please do not create an entry for a page URL that does not exist in the CMS system';

    this.adminService.announceTickedMessage(this._tickedMessage);
  }
}

родительский компонент вызвал исключение ExpressionChangedAfterItHasBeenCheckedError потому что он попытался обновить одно из своих общедоступных свойств с помощью отмеченного значения сообщения, отправленного дочерним компонентом:

Родительский компонент (выдает исключение)

export class AdminComponent implements OnInit, OnDestroy {
  private _tickedMessageSubscription: Subscription;

  tickedMessage: string = '';

  constructor(
    private router: Router,
    private adminService: AdminService
  ) { }

  ngOnInit() {
    /* 
      On the side nav if you click on CMS System, this piece of code throws the exception: 
      "ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed 
       after it was checked. Previous value: 'false'. Current value: 'true'.""
    */
    this._tickedMessageSubscription = this.adminService.tickedMessageAnnounced$.subscribe((tickedMessage: string) => {
      this.tickedMessage = tickedMessage;
    });
  }

  ngOnDestroy() {
    this._tickedMessageSubscription.unsubscribe();
  }
}

Что исправило ExpressionChangedAfterItHasBeenCheckedError , так это асинхронное выполнение обратного вызова подписки и ожидание отмеченного сообщения:

Родительский компонент (с асинхронным ожиданием)

export class AdminComponent implements OnInit, OnDestroy {
  private _tickedMessageSubscription: Subscription;

  tickedMessage: string = '';

  constructor(
    private router: Router,
    private adminService: AdminService
  ) { }

  ngOnInit() {
    /* 
      This clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this._tickedMessageSubscription = this.adminService.tickedMessageAnnounced$.subscribe(async (tickedMessage: string) => {
      this.tickedMessage = await tickedMessage;
    });
  }

  ngOnDestroy() {
    this._tickedMessageSubscription.unsubscribe();
  }
}

Исходя из мира WPF, кажется, что нам нужно указать потоку пользовательского интерфейса ожидать обратного вызова наблюдаемой подписки, поскольку наблюдаемые выполняются асинхронно?

Я только начинаю работать с Angular, поэтому, пожалуйста, проявите немного сострадания к моим навыкам Angularz: P

@ktabarez Спасибо, это мне очень помогло!

@ktabarez Спасибо! Кажется, это прекрасно работает! Я заключал подписку в родительский компонент в тайм-аут, который тоже работал, но казался грязным.

Я вижу, что при опросе состояния redux его гарантированная доставка, но при запуске, как это, когда вставляется в ngOnInit, а не в конструкторы

@ktabarez Большое спасибо!

Ваше решение async ... await in subscribe работает.

@ktabarez По сути, ваше решение делает то же самое, что и setTimeout ({}, 0), но кажется более элегантным. Совершенно нравится! Это также заставило меня понять, что можно ожидать чего угодно (почти как C # await Task.FromResult (tickedMessage)), так что радуйтесь этому!

Итак, вопрос: почему мы должны выполнять async / await при вычислении свойства наблюдаемого объекта, который получает данные из серверной части, которые могут часто меняться? Что в ngClass делает это необходимым? Я получаю это при использовании {наблюдаемого | async} канал. Так что async / await для меня - не лучший способ оценки. (или асинхронный канал - не лучший подход)

У меня есть эта проблема, когда у моего родительского компонента есть несколько дочерних компонентов. Один из дочерних компонентов имеет Input, где ему нужны данные из свойства родительского компонента, а свойство получает свои данные из Observable / Promise (пробовал оба).

parent.component.html

<mat-tab-group>
   <mat-tab>
      <app-child-1></app-child-1>
   </mat-tab>
   <mat-tab>
      <app-child-2></app-child-2>
   </mat-tab>
   <mat-tab>
      <app-child-3 [datasource]="data"></app-child-3>
   </mat-tab>
</mat-tab-group>

parent.component.ts

// ... omitted...
data: any;

ngOnInit() {
   this.service1.getMethod(some_id).then(data => this.data = data);
}

Я наткнулся на все решения, найденные в ветке. Но в моем случае ничего не работает. К счастью, некоторые намекали, что это проблема из-за манипулирования DOM, например, помещения выражения в _ (ngIf) _ в качестве примера.

Поэтому, чтобы этого избежать, я пытаюсь поэкспериментировать с ng-template , ng-container и ngTemplateOutlet .

<ng-container *ngTemplateOutlet="data ? content : loading"></ng-container>

<ng-template #content>
   <mat-tab-group>
      <mat-tab>
         <app-child-1></app-child-1>
      </mat-tab>
      <mat-tab>
         <app-child-2></app-child-2>
      </mat-tab>
      <mat-tab>
         <app-child-3 [datasource]="data"></app-child-3>
      </mat-tab>
   </mat-tab-group>
</ng-template>

<ng-template #loading>Loading your component. Please wait</ng-template>

Я смог решить эту проблему без использования ChangeDetectorRef или setTimeout()

Для меня эта ошибка возникла при отображении / скрытии поля в соответствии с условием, я смог решить ее после применения значений настройки полей:

this.form.get ('field').updateValueAndValidity();

Я пытался сделать это с помощью диалогового окна mat, которое открывается при инициализации, и я буквально пробовал каждое решение, которое я видел в этом потоке (установить тайм-аут, разрешение обещаний, наблюдаемый канал, после инициализации просмотра, после инициализации содержимого) и их комбинации. По-прежнему не работает. Затем я увидел сообщение @Splaktar о том, как это нарушает односторонний поток данных, поэтому я буквально сделал флаг в ngrx, говорящий, чтобы открыть диалоговое окно, и подписался на него, что изначально неверно, и я все еще получаю эту ошибку. Что, черт возьми, мне делать? Неужели буквально нет способа открыть модальный диалог, не прикрепив его к какому-то совершенно отдельному событию?

В инициализации:
this.store.pipe( select(getShouldLogin), ).subscribe((shouldLogin: boolean) => { if (shouldLogin) { this.openLoginDialog(); } }); this.checkUserId();

Вспомогательные функции:
checkUserId() { const id = this.cookies.getUserId(); if (!id || id === 'undefined') { this.connApi.setShouldLogin(true); } }
openLoginDialog() { const dialogRef = this.dialog.open(LoginDialogComponent, { width: '400px', height: '300px', }); dialogRef.afterClosed().subscribe(result => this.handleLogin(result)); }

Использование angular 6.0.0-rc.1

Я использую angular с ngrx и получил эту ошибку после отправки формы.
исправлено установкой
ChangeDetectionStrategy.OnPush
на компоненте формы

проблема все еще есть. пробовали всевозможные обходные пути. setTimeout работает первый раз, но последующий запуск dialog.open приводит к той же ошибке. Есть статус по этому поводу?

Я столкнулся с той же проблемой. Пробовал все, но похоже, что эта проблема возникает при одностороннем потоке данных.
Вот пытаюсь обновить selectedwoids. где проблема решается, но возникает та же ошибка.

        <p-row> <p-column class="text-left" footer="{{selectedWoids.length}} {{getWoidString(selectedWoids.length)}} selected out of {{getTotalCounts()}} {{getWoidString(getTotalCounts())}}" colspan="11"></p-column> </p-row>

private setSelectedWoidsCount () {
if (this.isSelectAllWoids) {
this.selectedWoids = this.allWoids;
}
}

Потому что вы нарушаете конвейер рендеринга Angular ...

Я вижу похожие ошибки «ExpressionChanged ...» после переключения с 4.1.2 на 4.2.3 .

В моем случае у меня есть два компонента, которые взаимодействуют через службу. Услуга предоставляется через мой основной модуль, и ComponentA создается до ComponentB .

В 4.1.2 следующий синтаксис работал нормально без ошибок:

Шаблон _ComponentA: _

<ul *ngIf="myService.showList">
...

_ComponentB Класс: _

ngOnInit() {
  this.myService.showList = false; //starts as true in the service
  ...
}

В 4.2.3 мне нужно изменить шаблон ComponentA следующим образом, чтобы избежать ошибки «ExpressionChanged ...»:

_ComponentA Шаблон: _

<ul [hidden]="!myService.showList">
...

Я все еще пытаюсь понять, почему это только что стало проблемой, и почему переключение с *ngIf на [hidden] работает.

Вы узнали, как это работает при переходе с ngIf на [скрытый]

Есть ли решение этой проблемы в Angular 6?

@alokkarma ... слишком старый ... вы должны перенести его как минимум на Angular 6 или 5. Но ваш пример кода выглядит ясным ... вы изменяете свойство службы в дочернем компоненте B, и это влияет на некоторое поведение в дочернем компоненте A. Оба дочерних компонента помещаются в один и тот же родительский компонент, поэтому все три обрабатываются вместе в отношение в одном цикле КД. Что вы ожидаете?

Тот факт, что такой же случай работал в версии 4.1.2, связан с некоторыми ошибками, которые были устранены в более поздних версиях, включая 4.2.3.

Я использую Angular 6. Я использую MessageService для связи между моим компонентом аутентификации и моим компонентом приложения, чтобы отображать различное содержимое панели навигации, если пользователь вошел в систему (или нет)

Он отлично работает, кроме этой ошибки!
Я пробовал другие решения, такие как EventEmitter, но это не работает! или я получаю ту же ошибку.

@dotNetAthlete ... покажите простую демонстрацию репродукции на Stackblitz. Говорить об этом без реального кода сложно.

@dotNetAthlete Я использую тот же базовый механизм, где у меня есть служба состояний, которая содержит заголовок страницы в качестве объекта поведения (asObservable) в основном компоненте контейнера и загруженные в него дочерние компоненты, которые устанавливают соответствующий заголовок страницы в службе состояний. для родительского контейнера для наблюдения и отображения.

Всегда возникала ошибка «Выражение изменено», когда контейнер инициализировал значение, а затем дочерний компонент немедленно обновлял его, поэтому я делаю это сейчас в родительском / контейнере:

    this.stateSvc.currentPageTitle$
      .subscribe(
        (async (pageTitle) => {
          this.pageTitle = await pageTitle;
        }))

Где на государственной службе это:

  // Store
  private currentPageTitleStore = new BehaviorSubject<string>("");

  // Getter (as Observable)
  public currentPageTitle$ = this.currentPageTitleStore.asObservable();

  // Setter
  public setCurrentPageTitle(pageTitle: string) {
    this.currentPageTitleStore.next(pageTitle);
  }

Это устраняет проблему. Это решение основано на некоторых полезных отзывах других участников этой темы.

@alignsoft - красивое решение - проблема исправлена ​​в приложении Angular 6.

Я вижу это при перезагрузке страницы на angular 7 сейчас ...
Я устанавливаю значение дочерних компонентов для родителей ngAfterViewInit
Пришлось сделать это на дочернем компоненте

  public activate() {
    setTimeout(() => this.active = true);
  }

Я нашел решение в этой теме https://github.com/angular/angular/issues/10762
После того, как я использовал ловушку жизненного цикла AfterContentInit , ошибка исчезла.

@alignsoft , просто добавляю к вашему изменению, поскольку мы используем BehavioralSubject вместо Subject,

Я уточнил это следующим образом:

\\ Component
export class AppComponent implements OnInit {
  isLoading: Boolean;

  constructor(private loaderService: LoaderService) { }

  ngOnInit(){
    this.loaderService.isLoading.subscribe(async data => {
      this.isLoading = await data;
    });
  }
}

\\ Service
@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  // A BehaviorSubject is an Observable with a default value
  public isLoading: BehaviorSubject<Boolean> = new BehaviorSubject(false);
  constructor() {}
}

\\ Any other component or in my case, an interceptor that has the LoaderService injected
this.loaderService.isLoading.next(true);

Но я согласен с @daddyschmack , я хотел бы получить любой ресурс, который указывает на информацию, касающуюся любого из вышеупомянутых исправлений ( cdr.detectionChanges() или async await или aftercontentchecked ), почему Атрибут [hidden] работает, а не *ngIf

@acidghost Спасибо за ссылку, она решила мою проблему. На самом деле я отказался от попыток исправить это в одной области моего приложения, но когда это снова начало происходить в новой области ...

Эта проблема была автоматически заблокирована из-за бездействия.
Пожалуйста, сообщите о новой проблеме, если вы столкнулись с аналогичной или связанной проблемой.

Узнайте больше о нашей политике автоматической блокировки разговоров .

_{_Это действие было выполнено автоматически ботом. _}