时间戳

首页 > 解决方案 > Angular 5根据Array函数动态更改图像ngFor

angular - Angular 5根据Array函数动态更改图像ngFor

问题描述

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

所以我所做的是：

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

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

}
}

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

但不幸的是，结果是我只得到了所有项目的第一张图片（http://icons.iconarchive.com/icons/icons8/ios7/96/Weather-Rain-icon.png）

而不是根据输出放置图像

标签： angulartypescriptangular5

解决方案

您只创建一个 forecastImg 变量，而不是在每个预测实例上创建一个。

我整理了一个工作示例，在其中我为image每个预测创建了一个新属性。

https://stackblitz.com/edit/angular-gsbrv9

推荐阅读