Question

您好我有webapi服务，它返回一个类型数组（MileStoneModel）。我想将转换后的（MileStoneModel）对象转换为typescript中的另一个类，我可以使用它来填充下拉选择列表，这是一个指令，我将在多个地方使用。下面是两个类的结构。

.section-img {
  min-height: 400px;
  display: table;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}

我需要将其转换为

    This is the source object 
    export class MileStoneModel
    {
        public Id: number;
        public Name: string;
        public StartDate: Date;

    }

因此需要将MileStoneModel []转换为SelectListItem []，并且需要在SelectListItem类中分配Id和Name属性。我的Service类返回MileStoneModel数组，下面的方法是getMileStones（）。我想调用这个方法并将结果连接到SelectListItem []。

    export class SelectListItem {
    constructor(id: number,
        name: string) { }
    }

/// SelectListItem指令代码..

           import { MileStoneModel} from '../models/milestoneModel'
           import {SelectListItem} from '../models/selectListItem';
                import { Http, Response, Headers, RequestOptions } from '@angular/http'
                import { Injectable } from '@angular/core'
                import { Observable }     from 'rxjs/Observable';
                import {IPagedResponse} from '../models/PagedResult';
                import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from 'ng2-pagination';
                import 'rxjs/Rx';



                @Injectable()
                export class MileStoneService //implements IPagedResponse<MileStoneModel>
                {

                    data: MileStoneModel[];
                    //private _page: number = 1;
                     total: number;

                    private pagedResult:  IPagedResponse<MileStoneModel>;

                    mileStones: MileStoneModel[]
                    private url: string = "http://localhost/ControlSubmissionApi/api/Milestones";
                    constructor(private http: Http) {


                    }
                    getMilestones(): Observable< MileStoneModel[]> {

                        return this.http.get(this.url)
                            .map((response: Response) => <MileStoneModel[]>response.json())            
                            .catch(this.handleError);


                    }


                    getPagedMilestones(page: number, pageSize: number): Observable<IPagedResponse<MileStoneModel>> {

                        return this.http.get(this.url + "/" + page + "/" + pageSize)           
                            .map((response: Response) => {
                              return  this.extractPagedData(response);

                            })
                            .catch(this.handleError);


                    }



                    private handleError(error: any) {
                        // In a real world app, we might use a remote logging infrastructure
                        // We'd also dig deeper into the error to get a better message
                        let errMsg = (error.message) ? error.message :
                            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
                        console.log(errMsg); // log to console instead
                        return Observable.throw(errMsg);
                    }



                    private extractData(res: Response) {

                        let body = res.json();
                        return body.data || {};
                    }

                    private extractPagedData(res: Response): IPagedResponse<MileStoneModel> {

                        let body = res.json();
                        console.log("result"+ body);
                        return {
                            data: <MileStoneModel[]>body.Data,
                            total: body.Total
                        }

                    }

                }

//我正在使用此指令的模板

        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);
            }


          public  createSelectList() {
                this.dataList = this.dataSourceList;
            }



        }

Answer 1

调用此方法可以获得SelectListItem数组

的可观察性

mileStoneService.getMilestones()
    .map((mileStones: MileStoneModel[]) => {
        return mileStones.map(mileStone => new SelectListItem(mileStone.Id, mileStone.Name));
    });

如何使用Map angular2将Typescript类属性分配给另一个类

1 个答案: