Question

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

Answer 1

您不需要使用[ngClass]插值。您可以使用以下命令设置类：

<div class="forecast-icon" [ngClass]="forecast.condition"></div>

将类应用于ngFor循环中的html元素

1 个答案: