Angular 5根据阵列功能动态更改图像ngFor

我正在尝试使用ngFor在HTML上动态更改图像

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

所以我所做的是：

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

循环遍历数组并根据当前天气更改变量的值：

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { WeatherService } from '../weather.service';
import { forEach } from '@angular/router/src/utils/collection';


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

  weatherImg: string;
  clouds: string;
  sun: string;

  public shown = false;
  cityName: string;
  weathers: any = [];
  forecasts: any = [];
  weatherType: string;
  forecastType: string;
  forecastImg: string;

  constructor(private _weatherService: WeatherService) {


  }

  ngOnInit() {
    setInterval(this.submitDataBox.bind(this, this.cityName), 60000);
    setInterval(this.submitData.bind(this, this.cityName), 60000);
    setInterval(this.weatherImage.bind(this), 10000);
  }

weatherImage() {

 // const weatherType = this.weathers.weather[0].main;

for (let i = 0, len = this.forecasts.list.length; i < len; i++) {

        if ( this.forecasts.list[i].weather[0].main.toLowerCase().indexOf('rain') > -1 ) {

        this.forecastImg = 'http://icons.iconarchive.com/icons/icons8/ios7/96/Weather-Rain-icon.png';

        console.log(this.forecasts.list[i].weather[0].main);

} else if (this.forecasts.list[i].weather[0].main.toLowerCase().indexOf('clouds') > -1) {
  this.forecastImg = 'http://icons.iconarchive.com/icons/icons8/windows-8/96/Weather-Clouds-icon.png';

}
}

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormsModule}；
从“../weather.service”导入{WeatherService}；
从'@angular/router/src/utils/collection'导入{forEach}；
@组成部分({
选择器：“应用天气组件”，
templateUrl:'./weather.component.html'，
样式URL:['./weather.component.css']
})
导出类WeatherComponent实现OnInit{
weatherImg：字符串；
云：弦；
孙：弦；
公开显示=假；
cityName:string；
天气：任何=[]；
预测：任何=[]；
天气类型：字符串；
艏楼类型：弦；
预测：字符串；
建造商（私人_weatherService:weatherService）{
}
恩戈尼尼特（）{
setInterval（this.submitDataBox.bind（this，this.cityName），60000）；
setInterval（this.submitData.bind（this，this.cityName），60000）；
setInterval（this.weatherImage.bind（this），10000）；
}
天气图像（）{
//const weatherType=this.weathers.weather[0].main；
for（设i=0，len=this.forecast.list.length；i-1）{
这是我的预测http://icons.iconarchive.com/icons/icons8/ios7/96/Weather-Rain-icon.png';
console.log（this.forecast.list[i].weather[0].main）；
}else if（this.forecast.list[i].weather[0].main.toLowerCase（）.indexOf（'clouds'）>-1）{
这是我的预测http://icons.iconarchive.com/icons/icons8/windows-8/96/Weather-Clouds-icon.png';
}
}

在component.html中：

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

五天详细预报

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

日期：{forecast.dt_txt|Date:'short'}
{{forecast.weather[0].main}

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

{{forecast.weather[0].description}

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

{{forecast.weather[0].icon}

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

温度{forecast.main.temp}

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

但不幸的是，结果是我只得到所有项目的第一个图像（）

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

---

您是否关闭了标签，而不是根据输出放置图像

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

<div *ngFor=" let forecast of forecasts.list">
  <div class="col-md-3 col-sm-6 mb-4">
    <a href="#">
      <img class="img-fluid" bind-src="forecastImg">
    </a>
  <div>
<div>

---

问题是您正在设置

this.forecastImg

，其中

this

是组件，而不是

forecast

。在循环过程中，您只需覆盖图像（实际上，您应该获得所有项目的最后一个图像，而不是第一个）

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

您需要做的是创建一个图像/预测列表，而不仅仅是一个图像。我假设

这个.predicts

是某个http调用的结果，所以让我们在控制器顶部创建一个新变量（而不是

forecastImg

）。我还建议使用对象来查找图标，而不是if/else：

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

// ideally you create an interface for a forecast
forecastItems: any[] = [];

// create an object for the icons that you can use for lookups
icons = {
  'rain': 'http://icons.iconarchive.com/icons/icons8/ios7/96/Weather-Rain-icon.png',
  'clouds': 'http://icons.iconarchive.com/icons/icons8/windows-8/96/Weather-Clouds-icon.png'
}

我将使用ES6循环预测并将图像分配给我们的阵列

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

for (let item of this.forecasts.list) {
  // here we could use that interface again
  const forecastItem = {
    'title': item.weather[0].main,
    'icon': ''
  }
  // assign the icon if we have one
  try {
    forecastItem['icon'] = this.icons[forecastItem.title.toLowerCase()];
  } catch (e) {}

  // store the object in our helper array
  this.forecastItems.push(forecastItem);
}

现在，您有了一个带有标题和图标的预测数组，可在模板中使用：

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

<div *ngFor="let forecast of forecastItems">
  <div class="col-md-3 col-sm-6 mb-4">
    <a href="#">
      <img class="img-fluid" bind-src="forecast.icon" alt="{{ forecast.title }}">
    </a>
  <div>
<div>

  <div *ngFor=" let forecast of forecasts.list">
 <div class="col-md-3 col-sm-6 mb-4"> 
<a href="#"> 
<img class="img-fluid" bind-src="forecast['forecastImg']">
 </a>

---

只是一个建议，而不是为图像设置一个变量，您可以执行以下操作：

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

this.forecasts.list.forEach((forecast) => { 
if (forecast.weather[0].main.toLowerCase().indexOf('rain') > -1 ) { 
forecast['forecastImg'] = 'http://icons.iconarchive.com/icons/icons8/ios7/96/Weather-Rain-icon.png';
} else if (forecast.weather[0].main.toLowerCase().indexOf('clouds') > -1) { 
forecast['forecastImg'] = 'http://icons.iconarchive.com/icons/icons8/windows-8/96/Weather-Clouds-icon.png'; } });

然后在模板中：

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

<div *ngFor="let forecast of forecastItems">
  <div class="col-md-3 col-sm-6 mb-4">
    <a href="#">
      <img class="img-fluid" bind-src="forecast.icon" alt="{{ forecast.title }}">
    </a>
  <div>
<div>

  <div *ngFor=" let forecast of forecasts.list">
 <div class="col-md-3 col-sm-6 mb-4"> 
<a href="#"> 
<img class="img-fluid" bind-src="forecast['forecastImg']">
 </a>

---

您只创建一个forecast变量，而不是在forecast的每个实例上创建一个

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

我总结了一个工作示例，其中我在每个预测上创建了一个新的

image

属性

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->

---

不相关，我只是省略了不相关的部分-正如我所说的，循环运行并填充图像。我将添加整个代码，以避免这些混淆

      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
          <img class="img-fluid" bind-src="forecastImg">
        </a>
        <h5>Date: {{forecast.dt_txt | date : 'short' }}</h5>
            <p > {{ forecast.weather[0].main }}</p>
            <p > {{ forecast.weather[0].description }}</p>
            <p > {{ forecast.weather[0].icon }}</p>
            Temperature <p >{{ forecast.main.temp }}</p>
      </div>



    </div>
    </div>
    <!-- /.row -->