Это мой первый день изучения angular, и я столкнулся с очень неинтуитивным сообщением об ошибке, в котором говорится:
Неперехваченная ошибка: ошибки синтаксического анализа шаблона: неожиданный закрывающий тег "p". Это может произойти, когда тег уже закрыт другим тегом. Для получения дополнительной информации см. https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("Номер {{ i + 1 }}: {{ phoneNumber }} [ ОШИБКА ->]
"): ng:///AppModule/AddressCardComponent.html@5:0
Ошибка выдается в действительном HTML-шаблоне, который выглядит следующим образом:
<p>Phones:</p>
<p *ngFor="let phoneNumber of user.phone; index as i">
<h3>
Number {{ i + 1 }}: {{ phoneNumber }}
</h3>
</p>
а в самом компоненте это выглядит так:
@Component({
selector: 'app-address-card',
templateUrl: './address-card.component.html',
styleUrls: ['./address-card.component.scss']
})
export class AddressCardComponent implements OnInit {
user: any;
constructor() {
this.user = {
name: 'Foo Bar',
title: 'Software Developer',
address: '1234 Main St., State, City 610010',
phone: [
'123-123-1234',
'456-546-4574'
]
}
}
ngOnInit() {
}
}
Круто то, что если я изменяю внутренний тег h3
на span
или a
, он работает идеально, как и ожидалось, тогда как когда внутренний тег p
, h3
, h2
, h1
, div
и т. д., он просто ломается с той же ошибкой.
Похоже, ему просто не нравятся определенные теги, лол
Так или иначе,
Я делаю что-то не так здесь? Если да, то как мне исправить шаблон? Что мне не хватает?
Много ли ситуаций, когда при разработке угловых приложений появляется так много неинтуитивных сообщений об ошибках?
PS: я использую Angular v7.0.5, если это имеет значение.
h1
внутри тегаp
- person user184994   schedule 10.11.2018p
, как только дойдет до вашегоh1
, так что теперь у вас есть исходный закрывающий тег без соответствующего открывающего тега. - person user184994   schedule 10.11.2018