订阅方法无法工作angular2

时间:2016-11-13 17:09:47

标签: angular rxjs

您好我有一个角度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>
                        &nbsp;

                        <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>

这是屏幕截图中的HTML源代码。enter image description here

0 个答案:

没有答案