Angular2從可觀察到的數組大小

Question

我有4個不同的數組，每個數組都有不同的長度。我需要弄清楚array.length以知道當前所選陣列中有多少個步驟。我希望這是在代碼中完成的，如果可能的話，不要在模板中完成。

step.service.ts

public apiURL(){ 
    if (this.heroID == 0){ 
    this.stepsUrl = 'api/stepsLiftSensor'; 
    } else if(this.heroID == 1){ 
    this.stepsUrl = 'api/stepsBucketSensor'; 
    } else if(this.heroID == 2){ 
    this.stepsUrl = 'api/stepsEmptyBucketSensor'; 
    } else if(this.heroID == 3) { 
    this.stepsUrl = 'api/stepsFullBucketSensor'; 
    } 
console.log(this.stepsUrl); 
} 

    getSteps(): Observable<Step[]> { 
    return this.http.get(this.stepsUrl) 
       .map(response => response.json().data as Step[]); 
    } 

    getStep(id: number): Observable<Step> { 
    const url = `${this.stepsUrl}/${id}`; 
    return this.http.get(url) 
     .map(response => response.json().data as Step); 
    } 

校準detail.component.ts

現在它經過11個步驟，但現在的數組大小不同會打破這樣的。我想這樣做（currentStep < this.stepService.getSteps（）。length（）），但這似乎不工作，因爲observable沒有length屬性。有沒有辦法做到這一點？

private currentStep: number = 0; //Variable for the current step 
next() { 
    //Assuming there is another step it pulls the next step up, else it says "End of steps" 
    if (this.currentStep < 11) { //make sure dont go past number of steps 
     this.currentStep ++; //Increments the step 
     this.stepService.getStep(this.currentStep).subscribe(data => (this.mainStepText = data.name)); //Handles return and sets the data it contains to local variable 
    } else { 
     this.mainStepText = "Calibration Finished."; 
    } 
    } 

內存，data.service.ts

import { Injectable } from '@angular/core'; 
import { InMemoryDbService } from 'angular-in-memory-web-api'; 
import { Hero } from './hero.class'; 
import { Step } from './step.class'; 
import { HeroService } from "./hero.service"; 
import { StepService } from "./step.service"; 
import { ActivatedRoute, Params } from "@angular/router"; 
import 'rxjs/Rx'; 

@Injectable() 

export class InMemoryDataService implements InMemoryDbService { 
    hero: Hero; 
    step: Step; 

    private heroService: HeroService; 
    private stepService: StepService; 
    private route: ActivatedRoute; 
    private location: Location; 

    constructor() {} 
    ngOnInit(): void { 

    this.route.params 
     .switchMap((params: Params) => this.heroService.getHero(+params['id'])) 
     .subscribe(hero => this.hero = hero); 
    } 

createDb() { 

     let heroes = [ 
     {id: 1, name: 'Lift Sensor', path: 'stepsLiftSensor'}, 
     {id: 2, name: 'Bucket Sensor', path: 'stepsBucketSensor'}, 
     {id: 3, name: 'Empty Bucket'}, 
     {id: 4, name: 'Full Bucket'} 
    ]; 

    let stepsLiftSensor = [ 
     {id: 1, name: 'test1'}, 
     {id: 2, name: 'test2'}, 
     {id: 3, name: 'test3'}, 
     {id: 4, name: 'test4'}, 
     {id: 5, name: 'test5'} 
    ]; 

    let stepsBucketSensor = [ 
     {id: 1, name: 'test1'}, 
     {id: 2, name: 'test2'}, 
     {id: 3, name: 'test3'}, 
     {id: 4, name: 'test4'}, 
     {id: 5, name: 'test5'} 
     {id: 6, name: 'test6'}, 
     {id: 7, name: 'test7'}, 
     {id: 8, name: 'test8'}, 
     {id: 9, name: 'test9'}, 
     {id: 10, name: 'test10'} 
    ]; 

    let stepsEmptyBucketSensor = [ 
     {id: 1, name: 'test1'}, 
     {id: 2, name: 'test2'}, 
     {id: 3, name: 'test3'}, 
     {id: 4, name: 'test4'}, 
     {id: 5, name: 'test5'}, 
     {id: 6, name: 'test6'} 
    ]; 

    let stepsFullBucketSensor = [ 
     {id: 1, name: 'test1'}, 
     {id: 2, name: 'test2'}, 
     {id: 3, name: 'test3'}, 
     {id: 4, name: 'test4'}, 
     {id: 5, name: 'test5'} 
    ]; 


    return { heroes, stepsLiftSensor, stepsBucketSensor, stepsEmptyBucketSensor, stepsFullBucketSensor }; 
    } 
} 

step.class.ts

export class Step { 
    id: number; 
    name: string; 
} 

Answer 1

你應該修改服務本身來回報陣列的長度以及數據（我們稱之爲lengthFromService）。

您可以將該長度存儲在.ts（我們稱之爲arrLength）中的變量中，然後檢查該變量。

所以在你的下一個（）函數，你可以做這樣的事情：

this.stepService.getStep(this.currentStep).subscribe(data => {this.mainStepText = data.name; this.arrLength = data.lengthFromService}); 

如果您需要更多的幫助，請張貼服務，使該data的代碼，或任何功能的代碼服務。

Answer 2

難追你想要什麼。但是，從我讀這5次後收集，是你要存儲的長度，一旦你得到的步驟，並使用該變量在next()方法：

stepsLength: number = 0; 

getSteps(): Observable<Step[]> { 
    return this.http.get(this.stepsUrl) 
      .map(response => response.json().data as Step[]) 
      .do(steps => this.stepsLength = steps.length); 
} 

Answer 3

重新閱讀你的球員的答案，看我的代碼，我最終解決它之後，我只是用

this.stepService.getSteps().subscribe(data => (this.stepsLength = data.length)); 

，並把它在構造函數中對我的校準detail.component.ts。