Angular 5 Динамическое изменение изображений ngFor в соответствии с функцией Array

Question

Я пытаюсь получить изображение для динамического изменения в HTML с помощью ngFor

так что я сделал:

цикл по массиву и изменение значения переменной в соответствии с текущей погодой:

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)

Вместо размещения изображения в соответствии с выводом

Answer 1

Вы создаете только одну переменнуюcastImg вместо того, чтобы создавать ее для каждого экземпляра прогноза.

Я собрал рабочий пример, в котором я создаю новое свойство image для каждого прогноза.

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

Answer 2

Проблема в том, что вы устанавливаете this.forecastImg, где this - это компонент, а не forecast. А во время цикла вы просто переопределяете изображение (на самом деле вы должны получить последнее изображение для всех элементов, а не первое)

Что вам нужно сделать, это создать список изображений / прогнозов, а не только одно изображение. Я предполагаю, что this.forecasts является результатом некоторого http-вызова, поэтому давайте просто создадим новую переменную в верхней части вашего контроллера (вместо forecastImg). Я также предлагаю использовать объект для поиска значков вместо if / else:

// 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 для просмотра прогнозов и присвоения изображения нашему массиву

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

Answer 3

Просто предложение, вместо одной переменной для изображения, вы можете сделать это:

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

Answer 4

Вы закрыли свои метки?

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