angular - 如何在 Angular 4 或 7 中设置 Observable 属性?
问题描述
我正在尝试使用从轮播服务中的 json 文件中检索到的数据设置 slides[] 属性。我的 carousel 组件注入 carousel-service 并调用公共 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
});
}
}
轮播服务.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");
}
}
解决方案
我在评论部分接受了 Suryan 的建议,并重构了我的代码以使用 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 文档,并且可以使用异步管道。