InnerHtml 不会显示 Angular 的结果

Question

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

  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')"

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

你最终会得到的是 [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，因此要显示多个图标，您只需拥有该组件的多个实例。 Use-case 可能是这样的：

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

InnerHtml 不会显示 Angular 的结果

InnerHtml won't show results with Angular

css

innerhtml

angular

所以：

更新：