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プロパティを持たないので動作していないようです。これを行う方法はありますか？メモリ内の-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

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."; 
    } 
    } 

。しかし、私はそれを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のコンストラクタにそれを置きます。