Очень неинтуитивная ошибка "Неожиданный закрывающий тег" в действительном шаблоне

Question

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

Uncaught Error: Ошибки синтаксического анализа шаблона: неожиданный закрывающий тег "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 и т. Д. Он просто ломается с той же ошибкой.

Похоже, ему просто не нравятся некоторые теги, lol

---

всяком случае,

1. Я что-то здесь не так делаю? Если так, как я должен исправить шаблон? Что мне не хватает?

2. Было ли много ситуаций, когда возникало столько неинтуитивных сообщений об ошибках при разработке угловых приложений?

---

PS: я использую Angular v7.0.5, если будет какая-либо разница

Answer 1

Для проверки HTML 5 теги заголовков не могут быть внутри тегов абзаца. Я подозреваю, что ваш код также будет работать нормально, если вы замените <p *ngFor="let phoneNumber of user.phone; index as i"> на <div *ngFor="let phoneNumber of user.phone; index as i">

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

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