如何显示 Angular innerHTML + 内容答案

【问题标题】：how to display Angular innerHTML + content如何显示 Angular innerHTML + 内容
【发布时间】：2021-01-26 13:45:05
【问题描述】：

我需要在 div 之间显示内部 html 和内容。我需要innerHTML中的一条消息，即notification.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>

【问题讨论】：

标签： angular angular8 dangerouslysetinnerhtml

【解决方案1】：

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

<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>

【讨论】：

【解决方案2】：

如果我是正确的，你想在 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>

【讨论】：