是否可以通过 JS 字符串在 HTML 中创建断线？

Question

export class MessageComponent implements OnInit {

  list: Foo[] = [{name: 'Name 1', groupName: 'Group 1'}, {name: 'Name 1', groupName: 'Group 1'}]
  message = '';

  constructor() { }

  ngOnInit() {
    this.message = this.confirmRemoval(this.list);
  }

  confirmRemoval(messageList: Foo[]): string {
  return `The following products already belong to a group and will be removed from it: ${messageList.map(v => 
  `- ${v.name} belongs to the group ${v.groupName}`).join("<br/>\n")}. Do you wish to continue?`;
  }
}

export interface Foo {
  name?: string;
  groupName?: string;
}

<h3>This is what it looks like: 
</h3>
<p>{{message}}</p>

<h3>What I wanted was to see if I could make the message have breaklines where the join is.

我有一个创建字符串的箭头函数。

我将该字符串作为消息传递给创建警报的组件。

所述组件向用户显示消息。

这是我的箭头函数：

export const confirmRemoval = (list: PersonalizedType[]): string =>
  'The following products already belong to a group and will be removed from it: ${list
    .map(v => `- ${v.name} belongs to the group ${v.groupName}`)
    .join(',')}. Do you wish to continue?';

如何让 join 语句在 HTML 中创建一个新行？是否可以仅使用文字 JS 来执行此操作，还是我需要做其他事情？

现在它通过在每条消息之间创建一个逗号来达到所需的目的，但我有点希望它会创建一个新行以提供更好的用户体验。

不确定它是否相关，但我在这个项目上使用 Angular 2+。

在此先感谢并抱歉格式化，我是新来这里提问的。

编辑：忘了提及这一点，但我尝试在 join 方法中使用 '\n' 和 'HTML breakline tag' 但它不起作用。

从一个有效的 stackblitz 链接到一个例子：

https://stackblitz.com/edit/angular-hkyki9?file=src%2Fapp%2Fapp.module.ts

Answer 1

出于安全原因，Angular 正在转义 <br> 标记。您可以使用以下绑定显式绕过它：

<p [innerHTML]="message"></p>

看到这个问题：How to render string with html tags in Angular 4+?

---

更好的方法是使用模板而不需要手动生成新的html标签：

<ng-template #fooitem let-foo>
  - {{foo.name}} belongs to the group {{foo.groupName}}
</ng-template>

<ng-template #alert let-message>
  <p>{{message.header}}</p>
  <p *ngFor="let foo of message.foo">
    <ng-container [ngTemplateOutlet]="fooitem" [ngTemplateOutletContext]="{ $implicit: foo }"></ng-container>
  </p>
  <p>{{message.footer}}</p>
</ng-template>

<ng-container [ngTemplateOutlet]="alert" [ngTemplateOutletContext]="{ $implicit: message }"></ng-container>

https://stackblitz.com/edit/angular-b3zftr

---

... 甚至更好地将模板分解为新的子组件。

Answer 2

尝试加入 br 标签而不是像这样的逗号：

.join("<br>")