有没有办法以角度调用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 条评论
登录 后参与评论

相关文章

有没有办法在ListView中调用函数?

有没有办法调用部分函数

JavaScript中有没有办法减少递归函数调用中的调用栈大小?

有没有办法在调用 nodejs 中的控制器之前调用函数

有没有办法让函数调用“继续”影响其调用者中的循环?

有没有办法使成员函数不能从构造函数中调用?

有没有办法在单独的 js 文件中为 jquery click() 函数调用函数?

有没有办法在javascript中调用对象内的所有函数?

有没有办法让 TypeScript 根据调用参数推断函数返回值的类型?

有没有办法让AJAX调用返回HTML内容和回调函数?

有没有办法从方法中调用对象?

有没有办法从角度2的字符串中删除html标签?

有没有办法在代码中重用具有不同值的函数?

有没有办法在Kotlin中从内部调用匿名函数?

有没有办法在函数调用中更改对对象的原始引用

有没有办法从bash函数调用中强制回显命令行?

有没有办法知道超类构造函数中调用对象的子类?C ++

有没有办法一次在JavaScript中多次调用函数?使用木偶

有没有办法从python中的调用函数访问变量?

有没有办法在C ++中复合函数?

有没有办法通过引用传递属性或字段以在函数中更新它?

有没有办法通过引用传递属性或字段以在函数中更新它?

有没有办法在辅助构造函数中设置自动属性?

有没有办法为python中的内置函数添加额外的属性?

有没有办法每天在dynamodb中重置一个属性的值?

有没有办法为本体中的对象属性定义值或状态?

有没有办法在计算属性中获取 v-model 值?

有没有办法以编程方式更改 Flutter TextTheme 中的属性值?

SQL 中的 STUFF(...) 函数有没有办法防止重复值?