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＆lt; this.stepService.getSteps（）。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

重新阅读你的家伙的答案并查看我的代码后，我最终解决了它，我刚刚使用

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

并将其放在我的calibration-detail.component.ts的构造函数中。

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

您应该修改服务本身以返回数组的长度以及数据（让我们称之为lengthFromService）。

您可以将该长度存储在.ts中的变量中（让我们称之为arrLength）并对该变量进行检查。

所以在你的next（）函数中你可以这样做：

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

如果您需要更多帮助，请发布服务代码或提供data服务的任何功能代码。

Angular2从可观察的

3 个答案: