InnerHtml 不会显示 Angular 的结果

Question

我正在尝试使用 angular 构建一个天气应用程序，并且我正在尝试根据收到的数据显示图标，所以我创建了这个函数，它将根据数据返回图标：

  icon(icon: any) {
    switch (icon) {
      case 'rain' :
        return '<i class="icon-basecloud"></i><i class="icon-rainy"></i>';
        break;
      case 'cloudy' :
        return '<i class="icon-basecloud"></i><i class="icon-cloud"></i>';
        break;
      case 'partly-cloudy-day' :
        return '<i class="icon-sunny-cloud"></i><i class="icon-sunny-cloud-sunny"></i>';
        break;
      case 'partly-cloudy-night' :
        return '<i class="icon-basecloud"></i><i class="icon-night"></i>';
        break;
      case 'clear-day' :
        return '<i class="icon-day"></i>';
        break;
      case 'clear-night' :
        return '<i class="icon-night"></i>';
        break;
      default:
        return '<i class="icon-basecloud"></i><i class="icon-rainy"></i>';
    }
  }

所以我尝试在 innerHtml 属性中调用此函数，但由于某种原因它不起作用

<div [innerHTML]="icon(temps.currently.icon)"></div>

当我检查检查器时，图标只是没有显示，这让我相信它与 css 和图标有关，因为如果我将 innerHtml 用于图像或其他东西，它就可以正常工作

Answer 1

其他答案似乎不完整，所以我将添加自己的。

[innerHtml]="icon('rain')"

考虑上述语句的模板中发生了什么。我的猜测是你的类名中的双引号会终止模板字符串。

你最终会得到[innerHtml]="'<i class="icon-basecloud"></i><i class="icon-rainy"></i>"'

这可能评估为"'<i class="，并且您已经有一个无法呈现的非法 html 字符串。

所以：

我建议将您的 switch 语句移至模板本身。 比如：

<div [ngSwitch]="temps.currently.icon">
    <span *ngSwitchCase="'rain'">
      <i class="icon-basecloud"></i><i class="icon-rainy"></i>
    </span>

    <span *ngSwitchCase="'cloudy'">
      <i class="icon-basecloud"></i><i class="icon-cloud"></i>
    </span>
    ... additional cases, etc
</div>

更新：

如果您真的想进一步清理它，您可以将此 switch 语句抽象为它自己的可重用组件。该组件可能有一个@Input() iconString，因此要显示多个图标，您只需拥有该组件的多个实例。用例可能类似于：

<div>
  <span>Monday:<span>
  <weather-icon [iconString]="forecast['monday']"></weather-icon>
</div>

<div>
  <span>Tuesday:<span>
  <weather-icon [iconString]="forecast['tuesday']"></weather-icon>
</div>

您的 component.ts 中有一个 forecast 变量

forecast = {
 monday: 'rain',
 tuesday: 'cloudy,
 ... etc
};