Recently, I picked up Angular and worked on the tour-of-heroes app. Currently, I'm facing a challenge in displaying a set of steps in a textarea based on the selected hero. The idea is that when hero1 is selected, it should show step 1, and upon clicking "next", it should display step 2. Unfortunately, I'm encountering an issue where it displays "[object Promise]" instead of the desired step. Any assistance in solving this problem would be greatly appreciated.
calibration-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Hero } from '../hero.class';
import { Step } from '../step.class';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { InMemoryDataService } from '../in-memory-data.service';
import { HeroService } from '../hero.service';
import { StepService } from '../step.service';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';
@Component({
moduleId: module.id,
selector: 'app-calibration-detail',
templateUrl: './calibration-detail.component.html',
styleUrls: ['./calibration-detail.component.css']
})
export class CalibrationDetailComponent implements OnInit {
@Input()
hero: Hero;
step: Step;
private mainStepText: String = "Main window text"; //It doesnt want to accept this.hero.id
private statusStepText: String = "Status window text";
constructor(
private heroService: HeroService,
private stepService: StepService,
private route: ActivatedRoute,
private location: Location,
private http: Http,
//private memoryService: InMemoryDataService
) { }
ngOnInit(): void {
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
.subscribe(hero => this.hero = hero);
this.route.params
.switchMap((params: Params) => this.stepService.getStep(+params['id']))
.subscribe(step => this.step = step);
}
goBack(): void {
this.location.back();
}
save(): void {
this.heroService.update(this.hero)
.then(() => this.goBack());
}
next(): void {
this.mainStepText = this.stepService.getStep(this.step.id).toString();
}
}
steps.components.ts
import { Component, OnInit } from '@angular/core';
import { Step } from '../step.class';
import { StepService } from '../step.service';
import { Router } from '@angular/router';
@Component({
moduleId: module.id,
selector: 'app-steps',
templateUrl: './steps.component.html',
styleUrls: ['./steps.component.css']
})
export class StepsComponent implements OnInit {
steps: Step[];
selectedStep: Step;
constructor(
private router: Router,
private stepService: StepService)
{ }
getSteps(): void {
this.stepService.getSteps().then(steps => this.steps = steps);
}
ngOnInit(): void {
this.getSteps();
}
onSelect(step: Step): void {
this.selectedStep = step;
}
gotoDetail(): void {
this.router.navigate(['/detail', this.selectedStep.id]);
}
}
step.service.ts
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Step } from './step.class';
@Injectable()
export class StepService {
private headers = new Headers({'Content-Type': 'application/json'});
private stepsUrl = 'api/steps'; // URL to web api
constructor(private http: Http) { }
getSteps(): Promise<Step[]> {
return this.http.get(this.stepsUrl)
.toPromise()
.then(response => response.json().data as Step[])
.catch(this.handleError);
}
getStep(id: number): Promise<Step> {
const url = `${this.stepsUrl}/${id}`;
return this.http.get(url)
.toPromise()
.then(response => response.json().data as Step)
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
calibration-detail-component.html
<div class="grid grid-pad">
<div class="col-1-2">
<div *ngIf="hero">
<h2 class="labelName">{{hero.name}} details!</h2>
</div>
<div *ngIf="step">
<div class="mainWindow">
<textarea readonly="textareaEdit" ng-model="textareaValue" [(ngModel)]="mainStepText"></textarea>
</div>
<div class="status">
<textarea readonly="textareaEdit2" style="background-color: #7B797B;" ng-model="textareaValue" [(ngModel)]="statusStepText"></textarea>
</div>
</div>
</div>
<div class="col-1-2">
<div class="container">
<div class="pull-right">
<button style ="min-height: 70px" (click)="empty1()">Empty</button>
<button style ="min-height: 70px" (click)="save()">Ok</button>
<button style ="min-height: 70px" (click)="next()">Next</button>
<button style ="min-height: 70px" (click)="goBack()">Back</button>
<button style ="min-height: 70px" (click)="empty3()">Empty</button>
</div>
</div>
</div>
</div>