如何显示Angular innerHTML +内容

问题描述

我需要在div之间显示内部html加上内容。 我需要在innerHTML中发送一条消息，即notification.message和内容，因为对于所有动态message.tag.button之间的按钮应该相同。这是关闭按钮。代替重复关闭按钮，我需要动态更改消息并保持关闭按钮不变。 请帮我这样做...

我要转换

<div [innterHTML]="message"><button></div> to

<div>message <button>X</button></div>

当我尝试转换为以下代码时，我没有关闭按钮，仅呈现内容。

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
      [innerHTML]="notification.message"
    >
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>

解决方法

如果我是对的，您想在div中同时显示/显示消息和按钮。然后 如果您在notification.message中没有任何HTML代码，则可以在此处使用插值而不是innerHtml。如果我理解您的查询错误，请更正。

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
    >
    {{notification.message}}
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>

,

我认为这是不可能的，至少我并不知道。为什么不只使用跨度？

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
    >
    <span [innerHTML]="notification.message"></span>
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>