Можно ли создать разрыв в HTML через строку JS?

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?';

Как мне go заставить оператор объединения создать новая строка в HTML? Можно ли использовать для этого только литерал JS или мне нужно сделать что-то еще?

Сейчас это служит той цели, которая необходима для этого, создавая запятую между каждым сообщением, но я вроде wi sh это создаст новую строку для лучшего взаимодействия с пользователем.

Не уверен, что это актуально, но я работаю с Angular 2+ над этим проектом.

Заранее спасибо и извините для форматирования я новичок в задании вопросов здесь.

Редактировать: Забыл упомянуть об этом, но я пытался использовать '\ n' и 'HTML тег breakline' в методе join, но это не не работает.

Ссылка с рабочего стекаблица с примером:

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

Answer 1

Angular экранирует тег <br> по соображениям безопасности. Вы можете явно обойти это, используя следующую привязку:

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

См. Этот вопрос: Как отобразить строку с тегами html в 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>")