Angular: двусторонняя привязка и привязка событий не работают
Я новичок в angular и изучаю учебник по Heroes. Я за двустороннюю привязку. Я изучил все различные типы привязок и попытался их реализовать. Интерполяция и привязка свойств работают нормально. Однако когда я попробовал двустороннюю привязку (и привязку событий) в файле, указанном в руководстве, с правильным импортом. Чтобы кто-то мог это увидеть. HTML-файл называется Heroes.comComponent.html и является шаблоном для Heroes.comComponent.ts с именем компонента app-heroes, который вызывается в app.comComponent.html. Элементы находятся в нижней части веб-страницы.
Я пробовал использовать привязку событий в app.comComponent (ts и HTML), и она, кажется, работает (синяя кнопка), но не двусторонняя привязка, которая находится под синей кнопкой (возраст героя). ни один из этих двух не работает с компонентом героев (Имя героя и Кнопка «Привет»).
Рабочая ссылка в комментариях, при вставке в пост почему-то не работает.
Приносим извинения, если какие-либо запутанные формулировки и спасибо!
@ng_dev Какие-нибудь ссылки сейчас работают? Включая этот: stackblitz.com/~/github.com/devisw0/Portfolio Я получил их из общего доступа, и единственным вариантом было скопировать URL-адрес, я вставил его в сообщение, но только тот случай, когда я вставил его в этот комментарий. работает. Извини.
Хорошо всегда проверять наличие ошибок в консоли (F12 в навигаторе). Angular при обнаружении ошибки обычно перестает работать.
Ответы 1
Помните: HTML-документ должен содержать только один элемент <body>.
Удалите <body></body> из heroes.component.html. После того, как ваша двусторонняя связь hero.name заработает. Вы ссылаетесь на «синюю кнопку», но ее нет в предоставленном Stackblitz (см. изображение ниже).
Я нашел это, просматривая журналы консоли в stackblitz. Отсюда вы видите, что существует проблема с гидратацией, и проверка HTML является предлагаемым решением.
Мы хотим, чтобы <body></body> был только в одном месте, в index.html.
Ошибка для справки:
Error: NG0500: During hydration Angular expected <body> but found <h2>.
Angular expected this DOM:
<app-heroes _ngcontent-ng-c2099804242 = "" _nghost-ng-c3944397914 = "">
<body>…</body> <-- AT THIS LOCATION
…
</app-heroes>
Actual DOM is:
<app-heroes _ngcontent-ng-c2099804242 = "" _nghost-ng-c3944397914 = "">
<h2 _ngcontent-ng-c3944397914 = "" style = "color:#2D2E2E;">…</h2> <-- AT THIS LOCATION
…
</app-heroes>
Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.
To fix this problem:
* check the "_HeroesComponent" component for hydration-related issues
* check to see if your template has valid HTML structure
* or skip hydration by adding the `ngSkipHydration` attribute to its host node in a template
Find more at https://angular.io/errors/NG0500
Вижу, в консоль точно не смотрел, но теперь точно знаю, хотя ошибок при подаче может и не быть. Есть ли причина, по которой нам следует использовать только <body></body> в index.html? Также возникает ошибка «Ошибка: NG0500: во время гидратации Angular ожидал <body>, но нашел <h2>», потому что я дважды использовал тег body?
В документах Mozilla обсуждается элемент body: Developer.mozilla.org/en-US/docs/Web/HTML/Element/body Мы решили, что он будет там, потому что это имеет наибольший смысл с точки зрения области применения. Могут быть и другие причины, но у вас будет только один index.html, поэтому оставьте там и свое единственное тело. Остальная часть приложения будет внутри него.
И да, эта ошибка была напрямую связана с двойником <body>. После удаления эта ошибка исчезла из журнала консоли.
ссылка на stackblitz не работает