您好我有一个角度2服务,它返回一个SelectListItem []但是当我在我使用此服务的组件上调用subscribe方法时,它无法将结果分配给组件属性。虽然如果我控制台.log订阅的输出结果是SelectListItem []。下面是我调用方法的组件我正在添加控制台的屏幕截图,我们可以看到服务返回了一些数据。
export class SelectListItem {
constructor(id: number,
name: string) { }
}
// component
import {SelectListItem} from '../models/selectListItem';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { InformationRequestService } from './informationrequest.service';
import {MileStoneService} from '../mileStone/milestone.service';
import {MileStoneModel} from '../models/milestoneModel';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
@Component(
{
moduleId: module.id,
templateUrl: './addinformationrequest.html' ,
providers: [InformationRequestService,MileStoneService]
}
)
export class AddInformationRequestComponenet implements OnInit {
mileStonedataSourceList: SelectListItem[];
selectedMileStone: number;
selectedRecepient: number;
errorMessage: string;
milestomes: MileStoneModel[];
form: FormGroup;
constructor(private inforService: InformationRequestService, private mileStoneService: MileStoneService) {
this.inforService = inforService; this.mileStoneService = mileStoneService;
}
ngOnInit() {
this.form = new FormGroup({
Id: new FormControl(),
InformationRequired: new FormControl(),
StartDate: new FormControl()
});
this.getMileStones();
// console.log(this.errorMessage);
}
getMileStones() {
this.mileStoneService.getSelectListMilestones().subscribe((t) => {
this.mileStonedataSourceList = t;
**// on console i see 13 objects returned by service but this.mileStonedataSourceList is not assigned**
console.log(t);
});
}
onMileStoneSelect(selectedItem) {
this.selectedMileStone = selectedItem;
console.log(this.selectedMileStone);
}
}
// addinformationRequest.html
<br /> <br />
<br />
<br />
<div class="row">
<div class="md-col-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> Add Information</h3>
</div>
<div class="panel-body">
<form [formGroup]="form" (ngSubmit)="saveMileStone()">
<div class="form-group">
<div class="md-col-4">
<label>Information Required:</label>
</div>
<div class="md-col-4">
<input formControlName="InformationRequired" />
</div>
</div>
<div class="form-group">
<div class="md-col-4"><label> MileStone Date</label></div>
<div class="md-col-4">
<ng-dropDown [dataSourceList]="mileStonedataSourceList"
[(ngModel)]="selectedMileStone"
[ngModelOptions]="{standalone: true}"
(onSelectItem)="onMileStoneSelect($event)"
ngDefaultControl></ng-dropDown>
</div>
</div>
<div class="btn-group pull-right" role="group" aria-label="...">
<button type="button" class="btn btn-primary pull-left">Cancel</button>
<button type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</form>
{{ newMileStone|json }}
</div>
</div>
</div>
</div>
//我正在使用的指令
import {Component, Input, Output, EventEmitter, OnInit} from "@angular/core";
import {NgModel, ControlValueAccessor} from "@angular/forms";
import {SelectListItem} from '../models//SelectListItem';
@Component({
selector: 'ng-dropDown[ngModel]',
// directives: [NgIf, NgFor, NgClass],
template: `
<div class="form-group">
<label for="sel1">Select list:</label>
<select (change)="onSelect($event.target.value)" name="dd" class="form-control" [id]="refId">
<option *ngFor="let item of dataList" [value]="item.id">
{{item.name}}
</option>
</select>
</div>
`
})
export class DropDownDirective implements OnInit {
@Input("dataSourceList") dataSourceList: SelectListItem[];
@Input("Id") Id: string;
dataList: SelectListItem[];
selectedOption: number;
refId: string;
@Output("onSelectItem") onSelectItem = new EventEmitter();
ngOnInit() {
this.refId = this.Id;
// console.log("lll" + this.dataSourceList.length);
this.createSelectList();
}
constructor(private selectedOptionModel: NgModel) {
// this.selectedOptionModel.valueAccessor = this;
}
onSelect(selectedId) {
console.log("selected option:" + selectedId);
this.onSelectItem.emit(selectedId);
}
createSelectList() {
this.dataList = this.dataSourceList;
}
}
//我用来返回的mileStoneService方法 getSelectListMilestones():Observable {
return this.http.get(this.url)
.map((response: Response) => <MileStoneModel[]>response.json())
.map((mileStones: MileStoneModel[]) => {
return mileStones.map(mileStone => new SelectListItem(mileStone.Id, mileStone.Name));
})
.catch(this.handleError);
}
//在addinformationRequest.html中更改了代码......
<div class="form-group">
<label for="sel1">Select list:</label>
<select name="dd" class="form-control" [id]="refId">
<option *ngFor="let item of mileStonedataSourceList" [value]="item.id">
{{item.name}}
</option>
</select>
</div>