角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() 
    }