现代Angular中“意外的结束标签”的好奇案例[关闭]

Question

假设我们有一个数据模型，一个代表要在模板中呈现的文本项的对象列表。每个都带有一个文本和一个类型。类型可以是HEADER、PARAGRAPH 和LIST。每个都对应一个相似的 HTML 标签，所以HEADER 将由<h1> 呈现，PARAGRAPH 将是<p>，LIST 将是一个<li>，最终包装在一个<ul></ul> 中。我们有一组给定的这些对象。例如：

[
 { textType: 'HEADER', text: 'Welcome!' },
 { textType: 'PARAGRAPH', text: 'Lorem ipsum is a lie, here are the facts:' },
 { textType: 'LIST', text: 'List item #1' },
 { textType: 'LIST', text: 'List item #2' },
 { textType: 'LIST', text: 'List item #3' },
 { textType: 'HEADER', text: 'Welcome again!' },
 { textType: 'PARAGRAPH', text: 'Lorem ipsum is not a lie after all, counterpoints:' },
 { textType: 'LIST', text: 'Another List item #1' },
 { textType: 'LIST', text: 'Another List item #2' },
 { textType: 'LIST', text: 'Another List item #3' },
 { textType: 'PARAGRAPH', text: 'That\'s all, folks!' }
]

问题很明显——HEADER 和 PARAGRAPH 都可以用带有 HTML 内容的单闭标签来表示。但是LIST 不仅需要一个标准的<li> 元素，还需要一个<ul>（如果我们假设需要严格的HTML）。如何在 Angular 模板中渲染它？我采用了一种我能想到的最自然的方法——*ngFor，并添加了一些额外的、不寻常的但合理的逻辑。在某种程度上，它看起来像是老式 PHP 风格的渲染。

<ng-container *ngFor="let textItem of summaryText; let index = index">
    <h1 *ngIf="textItem.textType === 'HEADER'">{{ textItem.text }}</h1>
    <p *ngIf="textItem.textType === 'PARAGRAPH'">{{ textItem.text }}</p>
    <ng-container *ngIf="textItem.textType ==='LIST'">
        <ng-container *ngIf="(index === 0) || (summaryText[index-1] && (summaryText[index-1].textType !== 'LIST'))">
        <ul>
        </ng-container>
        <li>{{ textItem.text }}</li>
        <ng-container *ngIf="(index === (summaryText.length - 1)) || (summaryText[index+1] && (summaryText[index+1].textType !== 'LIST'))">
        </ul>
        </ng-container>
    </ng-container>
</ng-container> 

得知这无法编译时，我感到有些惊讶。结果为Unexpected closing tag "ng-container"。而且，果然，当你想到它时，这是有道理的。 Angular 强制执行正确的 HTML，因此它期望指令中的 <ul> 闭包在没有时。这点我很理解。

但这仍然给我留下了一个未解决的问题 - 当我不知道它何时会在初始模型中发生时，如何呈现包含在 <ul> 中的列表？我不能在任何地方假设<ul>。我什至无法假设该模型中项目的顺序 - 它可能只是一个 PARAGRAPH、LIST、PARAGRAPH、LIST 等等（这将导致两个列表，每个列表都有一个项目）。

有没有办法在不影响数据模型的情况下实现？我知道我理论上可以更改模型，在里面制作一个单独的列表，检测到它，启动ul 等等。但在这种情况下，出于某种原因（请假设这是合理的并且我知道我在说什么）我无法更改模型。

我想知道是否有任何方法可以使 Angular 正确渲染。或者，如果这可能是一种错误的方法，是否有另一种方法可以直接在模板中解决这个问题？

Answer 1

我在 Stackblitz 上为您创建了一个已修复错误的版本。

错误是因为您的模板中违反了HTML 嵌套标记规则：

<ng-container *ngIf="(index === 0) || (summaryText[index-1] && (summaryText[index-1].textType !== 'LIST'))">
  <ul>
</ng-container>

在关闭内部标签<ul>之前有一个结束标签</ng-container>。

此外，您必须更改 JSON 对象数据以获得更好的 <li> 项目结构，如下所示：

  this.summaryText = [
      { textType: 'HEADER', text: 'Welcome!' },
      { textType: 'PARAGRAPH', text: 'Lorem ipsum is a lie, here are the facts:' },
      { textType: 'LIST', text: ['List item #1', 'List item #2', 'List item #3'] },
      { textType: 'HEADER', text: 'Welcome again!' },
      { textType: 'PARAGRAPH', text: 'Lorem ipsum is not a lie after all, counterpoints:' },
      { textType: 'LIST', text: ['Another List item #1', 'Another List item #2', 'Another List item #3'] },
      { textType: 'PARAGRAPH', text: 'That\'s all, folks!' }
    ]