<div class="weather-app-wrapper" *ngIf="weather !== undefined">
<div class="weather-wrapper" *ngFor="let forecast of weather.forecastDays">
<div class="weather-card">
<div class="forecast-icon" [ngClass]="{{forecast.condition}}"></div>
<h1>{{forecast.tempMin}}º - {{forecast.tempMax}}º</h1>
<p>{{forecast.day}}</p>
</div>
</div>
</div>
我正在尝试将一个类应用于此行中的html元素:<div class="forecast-icon" [ngClass]="{{forecast.condition}}"></div>
虽然它给出了错误。有没有办法在html中执行此操作,还是必须在打字稿中完成?我知道如何为静态html做这件事,但不是在创建html元素的循环中。我知道forecast.condition
拥有一个有效的字符串,并且循环循环5次,其余的属性工作得很好。我能做到这一点的方式是什么?
示例:
//forecast.condition = "sunny"
<div class="forecast-icon">
should turn into
<div class="forecast-icon sunny">
on the html page
以下是预测模型:
export class ForecastDay {
tempMin: number;
tempMax: number;
day: string;
condition: string;
}
这是错误:
Uncaught Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
<div class="weather-card">
<div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
<h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
<div class="weather-card">
<div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
<h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Missing expected : at column 21 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
<div class="weather-card">
<div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
<h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Unexpected token } at column 21 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
<div class="weather-card">
<div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
<h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Unexpected token '}' at column 22 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
<div class="weather-card">
<div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
答案 0 :(得分:2)
您不需要使用[ngClass]
插值。您可以使用以下命令设置类:
<div class="forecast-icon" [ngClass]="forecast.condition"></div>