I'm trying to call the weatherToFontAwesomeIcon(weatherDescription: string) function within the HTML file for this component. Basically I am trying to display a certain FontAwesome icon given the weather the api gives.

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

}

Currently I am calling the function like this in the HTML. I am trying to set the value of icon dynamically by calling the weatherToFontAwesomeIcon function.

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

This is the dictionary that maps the value given from the api to the name of the fontawesome icon.

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

This is the error I am receiving

CodePudding user response：

Use a custom pipe and pass the weather and return the icon name

Template: [icon]="weather | weatherType"

WeatherTypePipe:

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