* ngFor угловой 2 при создании вкладок - Выражение изменилось после того, как было проверено

Я использую вкладку проекта объясняется здесь: Tabs Project * ngFor угловой 2 при создании вкладок - Выражение изменилось после того, как было проверено

Все остальное, но мой вопрос работает отлично. Единственное, что не работает для меня, на данный момент составляет *ngFor при создании вкладок.

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

Что я хочу сделать, это попробовать и по-прежнему заставить его работать, для меня очень важно использовать *ngFor в селекторе tabs.

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

Plunker Code

Важно сказать, Ive посмотрел в

Here

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

В дополнение

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

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

источник

2016-12-18 Ori Refael

Я немного пошатнулся и вижу проблему в шаблоне вкладки, в частности, в «активном» значении. Если вы используете «true» или «false» для «! Active», ваша проблема исчезнет. Основываясь на ошибке, казалось бы, что-то значение для данной вкладки изменяется таким образом, что Угловые пробки. Я занимаюсь немного больше, чтобы понять, смогу ли я это разрешить. –

Также интересно; если в классе Tabs, если вы установите начальное значение в false в обработчике onSelect, проблема исчезнет. Я уверен, это потому, что начальное значение ложно, и вы устанавливаете его в true, когда вкладки создаются/init'd. –

@TimConsolazio я мог бы сыграть с этим, а также просто проверить, есть ли дополнительные способы для этого. –

Одним из решений является обернуть «зоны» код setTimeout (другие методы для запуска обнаружения изменений вручную также будет работать)

if(activeTabs.length === 0) { 
     setTimeout(()=>{ 
     this.selectTab(this.tabs.first); 
     },0); 
}

Полный plunker: https://plnkr.co/edit/UVfiJFYexgua2HfPe0Lw?p=preview

источник

2016-12-18 21:53:13 echonax

, прежде чем я предложу вам заняться любовью со мной для решения моей проблемы на 3-4 часа. Есть ли способ, который не работает вокруг, о котором вы знаете? –

@OriRefael Ха-ха, это было первое, что пришло мне в голову. Конечно, есть и другие способы, как более подробно объяснил дрюмхор и Марк Райкок. Но я не хотел менять архитектуру вашего кода. Итак, это более «практичный» взлом/трюк. – echonax

В конце концов я пришел к тому же решению: я просмотрел документы с привязкой к жизненному циклу компонентов, и проблема в том, что здесь проблема, является архитектурной, манипулируя связанными свойствами объекта в ранних циклах привязки вкладок, казалось бы, нет нет. Существует несколько способов решить эту проблему, но единственное, что я обнаружил, что работы указаны здесь. http://www.allenhashkey.com/web-development/angular2/angular-2-expression-changed-after-it-has-been-checked-exception/ –

Для того, чтобы решить проблему, вы необходимо удалить код для установки первой вкладки в активный из вашего метода ngAfterContentInit(). Этот код вызывает вопрос:

Я предполагаю, что ошибка всплывает из-за обнаружения изменений требует, чтобы DOM стабилизируется после того, как один прогон, и ваш звонок в ngAfterContentInit() требует anothed пропуск CD, чтобы отразить новое значение tab.active в DOM.

Вместо этого вы можете установить первый элемент в своем * ngFor, чтобы быть активным по умолчанию.Что-то вроде:

<tab *ngFor="let item of ['1','2']"; let index = index" [active]="index == 0"...

EDIT: Кажется, вы также можете использовать first local variable (не пробовал). См. Это plunkr

источник

2016-12-18 22:00:41 Fjut

, хотя вы, вероятно, правы, я предпочитаю контроль будет в руках на Tabs.component, а не на внешнем, поэтому я буду испытывать недостатки в написании работы в своем коде и ответе на вопрос @echonax. –

* ngFor угловой 2 при создании вкладок - Выражение изменилось после того, как было проверено

ответ

Смежные вопросы