有没有办法以角度调用html属性值中的函数?

我正在尝试在此组件的 HTML 文件中调用 weatherToFontAwesomeIcon(weatherDescription: string) 函数。基本上,鉴于 api 给出的天气,我试图显示某个 FontAwesome 图标。

import { CurrentLocationService } from './../../current-location.service';
import { GeoLocation } from './../GeoLocation';
import { CityInformationService } from './../../city-information.service';
import { weather } from './../post';
import { Observable, Subscription } from 'rxjs';
import { WeatherCallsService } from './../../weather-calls.service';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-weather-details',
  templateUrl: './weather-details.component.html',
  styleUrls: ['./weather-details.component.scss']
})
export class WeatherDetailsComponent implements OnInit, OnDestroy {

  private subscription: Subscription = new Subscription();

  weatherDetail$: Observable<weather>;
  cityName: string;
  currentLocation$: Observable<GeoLocation>;

  constructor(private _weatherCallService: WeatherCallsService,
              private _cityInformationService: CityInformationService,
              private _currentLocationService: CurrentLocationService) { 
              }

  /**
   * Description: Converts the string number from Kelvin to Fahrenheit.
   * @param valNum - The temperature in Kelvin units
   */
  temperatureConverter(valNum: string): string {
    let value = Number(valNum);
    let result = ((value-273.15)*1.8)+32;
    return result.toFixed(2).toString();
  }

  weatherToFontAwesomeIcon(weatherDescription: string): string { // Call this function in the html
    return weatherMainToFontawesome[weatherDescription];
  }

  ngOnInit() {
    this.subscription.add(this._cityInformationService.cityName$.
      subscribe(newCity => {
        this.cityName = newCity;
        this.weatherDetail$ = this._weatherCallService.
          getCurrentWeatherByCity(this.cityName);
    }));

    this.weatherDetail$ = this._weatherCallService.
      getCurrentWeatherByCity(this.cityName);

    // this.currentLocation$ = this._currentLocationService.getLocation();

    // this.subscription.add(this.currentLocation$.subscribe(coordinate => {
    //   this.weatherDetail$ = this._weatherCallService.getCurrentWeatherByCoordinate(coordinate);
    // }));
  }

  ngOnDestroy(){
    this.subscription.unsubscribe();
  }

}

目前我在 HTML 中调用这样的函数。我试图通过调用weatherToFontAwesomeIcon 函数来动态设置图标的值。

<div *ngIf="weatherDetail$ | async as post; else notShow">
    <h2>{{post.name}}</h2>
    <fa-icon icon="weatherToFontAwesomeIcon({{post.weather[0].main}})" size="6x"></fa-icon> <!-- This line is not rendering correctly -->
    <h3>Weather: {{post.weather[0].main}}</h3>
    <h1>{{temperatureConverter(post.main.temp)}} &#8457;</h1>
    <h3>Pressure: {{post.main.pressure}} hPa</h3>
    <h3>Humidity: {{post.main.humidity}}%</h3>
    <h3>Temperature Min: {{temperatureConverter(post.main.temp_min)}} &#8457;</h3>
    <h3>Temperature Max: {{temperatureConverter(post.main.temp_max)}} &#8457;</h3>   
</div>
<ng-template #notShow>
    <p>This city does not exist!</p>
</ng-template>

这是将 api 给出的值映射到 fontawesome 图标名称的字典。

const weatherMainToFontawesome = {
    "Thunderstorm":  "thunderstorm",
    "Drizzle": "cloud-drizzle",
    "Rain": "cloud-rain",
    "Snow": "snowflake",
    "Mist": "smog",
    "Smoke": "smog",
    "Haze": "smog",
    "Dust": "smog",
    "Fog": "smog",
    "Sand": "smog",
    "Ash": "smog",
    "Squall": "smog",
    "Tornado": "tornado",
    "Clear": "sun",
    "Clouds": "cloud"
};

这是我收到的错误

苏曼

使用自定义管道并传递天气并返回图标名称

模板:[icon]="weather | weatherType"

天气类型管道:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'weatherType',
})
export class WeatherTypePipe implements PipeTransform {
  weatherMainToFontawesome = {
    Thunderstorm: 'thunderstorm',
    Drizzle: 'cloud-drizzle',
    Rain: 'cloud-rain',
    Snow: 'snowflake',
    Mist: 'smog',
    Smoke: 'smog',
    Haze: 'smog',
    Dust: 'smog',
    Fog: 'smog',
    Sand: 'smog',
    Ash: 'smog',
    Squall: 'smog',
    Tornado: 'tornado',
    Clear: 'sun',
    Clouds: 'cloud',
  };

  transform(weather: string): string {
    return this.weatherMainToFontawesome[weather];
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章