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>

更新：

如果您真的想进一步清理，可以将该开关语句抽象为它自己的可重用组件。该组件可能有一个@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
};

InnerHtml在Angular中不会显示结果

1 个答案:

所以：

更新：