Как установить свойство Observable в Angular 4 или 7? - PullRequest
Новая
       10

Как установить свойство Observable в Angular 4 или 7?

0 голосов
/ 23 октября 2018

Я пытаюсь установить свойство slides [] с данными, полученными из файла json в моей службе карусели.Мой карусельный компонент внедряет карусельный сервис и вызывает публичную функцию getSlides (), но возвращаемое значение - пустой массив.

Что я делаю не так?

При этом код: 

//carousel.component.ts
import { Component, OnInit } from '@angular/core';
import { CarouselService } from '../../services/carousel.service';

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

  slides: string[];

  constructor(private carouselService: CarouselService) { }

  ngOnInit() {
    this.getSlides();
  }

  getSlides(): void {
    this.carouselService.getSlides()
      .subscribe(slides => {
        console.log('show slides', slides);
        this.slides = slides
      });
  }

}

Carousel.service.ts 

import { Injectable } from '@angular/core';
import { Observable, of, ObservableInput } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CarouselService {

  slides: string[] = [];

  constructor(private http: HttpClient) {
    this.getJSON().subscribe(data => {
      this.slides = data['Carousel'];
      console.log('data loaded');
    });
  }

  public addSlide(title: string) {
    this.slides.push(title);
  }

  public getSlides(): Observable<string[]> {
    return of(this.slides);
  }

  private getJSON(): Observable<Object> {
    return this.http.get("./assets/carousel.json");
  }
}

1 Ответ

0 голосов
/ 24 октября 2018

Я воспользовался советом Сурьяна в разделе комментариев и реорганизовал свой код для использования функций async / await, а во внешнем интерфейсе компонент был обновлен и теперь содержит свойства. 

import { Injectable } from '@angular/core';
import { Observable, of, ObservableInput } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CarouselService {    

  constructor(private http: HttpClient) { }    

  async public getJSON(): Observable<Object> {
    return this.http.get("./assets/carousel.json");
  }
}

//carousel.component.ts
import { Component, OnInit } from '@angular/core';
import { CarouselService } from '../../services/carousel.service';

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

  slides: string[];

  constructor(private carouselService: CarouselService) { }

  ngOnInit() {
    this.getSlides();
  }

  getSlides(): void {
    this.carouselService.getSlides()
      .subscribe(await slides => {
        console.log('show slides', slides);
        this.slides = slides
      }.bind(this));
  }

}

Просто примечаниеЕсть лучшие способы сделать асинхронную операцию.Я только что прочитал документацию Angular.io и там асинхронные каналы можно использовать.

...