Я сталкиваюсь с проблемой при отправке моих служебных данных в массив в ANGULAR

Question

Я пытаюсь передать изображения, поступающие из сервиса, в массив, и с помощью этого массива я пытаюсь вставить изображения в свое приложение.

Я помещаю ФАЙЛ МОЕГО компонента ниже

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
head_slider: any = [];
imgslider: any = [];

  constructor( public http: HttpClient ) { }

  slides  = [  ];

slideConfig  = {'slidesToShow': 4, 'slidesToScroll': 4};

  ngOnInit() {

  this.http.get('https://newsapi.org/v2/top-headlines?country=in&apiKey=69e4c9820959482e8c40e42f8bcfe975').subscribe(data => {
    this.head_slider = data['articles'];

   console.log(this.head_slider);
   this.slides.push( 'img :' + this.head_slider.urlToImage);
  });

  }

addSlide() {
  this.slides.push({img: 'http://placehold.it/350x150/777777'});
}

removeSlide() {
  this.slides.length = this.slides.length - 1;
}

afterChange(e) {
  console.log('afterChange');
}

}

В приведенном выше коде я хочу нажать клавишу и значение, которое существует в сервисе, для изображения в массиве слайды = [];, Таким образом ---> слайды = [img:, img:, img:];

Я помещаю HTML-файл ниже

<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
              <img src="{{ slide.img }}" alt="" width="100%">
        </div>
    </ngx-slick>

    <button (click)="addSlide()">Add</button>
    <button (click)="removeSlide()">Remove</button>
    <button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
    <button (click)="slickModal.unslick()">unslick</button>

Answer 1

Вам нужно перебрать head_slider, потому что это массив.

ngOnInit() {

    this.http.get('https://newsapi.org/v2/top-headlines?country=in&apiKey=<<api key here>>').subscribe(data => {
        this.head_slider = data['articles'];
        for(let i = 0; i < data['articles'].length; i++){
            this.slides.push({img: data['articles'][i].urlToImage})
        }
    });

}

Answer 2

Пожалуйста, измените

this.slides.push( this.img = this.head_slider.urlToImage)

на

this.slides.push( {img: this.head_slider.urlToImage});