Question

我正在遍历字符串数组（称为单词），并希望使用Angular / Typescript为每个单词创建span元素，并为行尾字符（\ n）创建br元素。我已经有了ngFor指令：

<div id = documentContents *ngIf="showDocument">
    <span *ngFor="let word of words" >
        {{word}}
    </span>
</div>

它当前从所有内容创建跨度，甚至是数组中的br元素。注意：解析文档时，我在行末字符之外创建了br元素。不用嫁给这种解决方案，似乎是个好主意。逻辑上我想做类似的事情：

if(word != "<br/>") {
    <span> {{word}} </span>
}
else {
    create a <br/> element
}

所有span和br元素都附加到包含div的位置，并保持原始源格式（尽可能）

但是不确定如何实现ngIf部分。我已经尝试过将ngFor指令放在包含div元素（docContents）上，但是随后它生成div元素，副跨度（预期）。我用javascript写过类似的东西，只是document.append（span或br元素）的简单问题。这可能是一件简单的事情，但它使我无所适从。感谢任何帮助。

Answer 1

将*ngFor放在<ng-container>上，不会在运行时向DOM添加额外的元素。

并放置一个内部*ngIf和一个指向<ng-template>的模板引用来处理else部分：

<div id = documentContents *ngIf="showDocument">
    <ng-container *ngFor="let word of words" >
        <span *ngIf="word !== '\n'; else br">{{ word }}</span>
        <ng-template #br><br /></ng-template>
    </ng-container>
</div>

如果需要更多信息，请在<ng-container>上

Here is an article。

Answer 2

只是@jo_va答案的替代方法，它的IMO稍微更易于阅读：

<div id="documentContents" *ngIf="showDocument">
  <ng-container *ngFor="let word of words">
    <span *ngIf="word !== '\n'">{{word}}</span>
    <br *ngIf="word === '\n'">
  </ng-container>
</div>

如果单词不是换行符，则仅显示跨度，否则显示<br>。

唯一的缺点是重复该条件，可以通过在组件上添加简单的isNewline()方法并改为使用!isNewLine() / isNewLine()来解决此问题。

演示：https://stackblitz.com/edit/angular-prkeyy

使用ngFor创建不同的元素类型

2 个答案: