角4可观察到在服务

Question

阵列

我已经实现在服务的阵列的接口：

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 

interface Artwork { 

    artTitle: string; 
    slideUrl?: string; 
} 


let Artwks: Artwork [] = []; 

Artwks.push({ 
    artTitle: "'Surprising Breakfast Ideas'", 
    slideUrl: './assets/SBI_Slide_1.jpg', 

}); 

Artwks.push({ 
    artTitle: "'Eagle'", 
    slideUrl: './assets/Eagle_Slide_2.jpg', 
}); 

Artwks.push({ 
    artTitle: "'Knot'", 
    slideUrl: './assets/Knot_Slide_3.jpg', 
}); 

@Injectable() 


export class ImageServiceService { 

    Artwks = Artwks; 
    i: number = 0; 

    getIndex() { 
     return this.i ; 
    } 

    getSlide() { 
     return this.Artwks[this.i].slideUrl; 
    } 

    getPrev() { 
     this.i = this.i===0 ? 0 : this.i - 1; 
     this.getTitle(); 
     console.log(this.getTitle()); 
     this.getSlide(); 
    } 

    getNext() { 
     this.i = this.i===this.Artwks.length ? this.i : this.i + 1; 
     this.getTitle(); 
     console.log(this.getTitle()); 
     this.getSlide(); 
    } 

    getTitle(): Observable<Artwork.artTitle> { 
     return this.Artwks[this.i].artTitle; 
    } 



} 

我想显示的阵列的标题组件时GETNEXT（）或getPrev（）被调用在服务上，但我不知道如何设置我的观察值，以便每次更改artTitle时都更新它的值。

我得到错误“‘艺术品’只是指一个类型，而是被用作这里命名空间”

Answer 1

您从getTitle()返回一个字符串，那么你的类型，应该是string。

getTitle(): string { //.etc 

编辑：

如果你想使用可观察到的，你需要做一个观察到某处返回。我不知道如何做到这一点不知道如何类被使用，但其基本思想是这样的：

创建并受观察到：

import {Subject} from 'rxjs/Subject'; 

export class ImageServiceService { 
    public artworks:Subject<Artwork> = new Subject(); 

    private index: number = 0 

    getArt(){ 
     this.artworks.next(this.Artwks[this.index]) 
     this.index++ 
    } 
    // etc. 
} 

然后在你的组件，您可以订阅可观察到：

constructor(private imageService: ImageServiceService){ 
    this.artworks = imageService.artworks 
    this.artworks.subscribe(v => // do something with it) 

    // artworks should update with the subject calls next() 
    }