Api与角度服务的互动

时间：2017-07-18 08:42:16

标签： angular promise devexpress devextreme

我想用我的角度调度程序的应用程序与api进行交互。 （使用devextreme的调度程序插件）

在我的api中，我有以下要素：

Person {
id : String ;
firstName : String ;
lastName : String ;
}

我的插件需要“资源”（人员）的这些元素

let resources: Resource[] = [
    {
        text: "foo",
        id: 1,
        color: "#cb6bb2" ( a random color )
    } ];

我想知道我必须在哪里制作“apiAdapter”功能才能做到这一点：text = firstName“+”lastName，id = id。

这是我的api.services.ts（如果需要）

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {api_url} from './api.constants';

@Injectable()

export class Croissants {
    croissantId: string;
    personId: number[];
    timeStamp: number[];
    reason: Text;
}

export class Personnes {
    personId: number;
    lastName: string;
    firstName: string;
}


export class EventService {

    constructor(private http: Http) {}

    getCroissants() {
        return this.http.get(api_url + 'croissants')
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }

    createCroissants(personId, timeStamp, reason) {
        return this.http.post(api_url + 'croissant/' + '/' + personId + '/' + timeStamp, + '/' + reason)
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }

    updateCroissants(croissantId, personId, timeStamp, reason) {
        return this.http.put(api_url + 'croissant/' + '/' + croissantId + '/' + personId, + '/' + timeStamp, + '/' + reason)
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }

    deleteCroissants(croissantId) {
        return this.http.delete(api_url + 'croissant/' + croissantId)
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }

    getPersonnes() {
        return this.http.get(api_url + 'persons')
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }

}

随调度程序插件提供的原始app.services.ts：

import { Injectable } from "@angular/core";

export class Appointment {
    text: string;
    ownerId: number[];
    startDate: Date;
    endDate: Date;
    allDay?: boolean;
    recurrenceRule?: string;
}

export class Resource {
    text: string;
    id: number;
    color: string;
}

let appointments: Appointment[] = [
    {
        text: "Website Re-Design Plan",
        ownerId: [4],
        startDate: new Date(2017, 4, 25, 9, 30),
        endDate: new Date(2017, 4, 25, 11, 30)
    }, {
        text: "Book Flights to San Fran for Sales Trip",
        ownerId: [2],
        startDate: new Date(2017, 4, 25, 12, 0),
        endDate: new Date(2017, 4, 25, 13, 0),
        allDay: true
    }, {
        text: "Install New Router in Dev Room",
        ownerId: [1],
        startDate: new Date(2017, 4, 25, 14, 30),
        endDate: new Date(2017, 4, 25, 15, 30)
    }, {
        text: "Approve Personal Computer Upgrade Plan",
        ownerId: [3],
        startDate: new Date(2017, 4, 26, 10, 0),
        endDate: new Date(2017, 4, 26, 11, 0)
    }, {
        text: "Final Budget Review",
        ownerId: [1],
        startDate: new Date(2017, 4, 26, 12, 0),
        endDate: new Date(2017, 4, 26, 13, 35)
    }, {
        text: "New Brochures",
        ownerId: [4],
        startDate: new Date(2017, 4, 26, 14, 30),
        endDate: new Date(2017, 4, 26, 15, 45)
    }, {
        text: "Install New Database",
        ownerId: [2],
        startDate: new Date(2017, 4, 27, 9, 45),
        endDate: new Date(2017, 4, 27, 11, 15)
    }, {
        text: "Approve New Online Marketing Strategy",
        ownerId: [3, 4],
        startDate: new Date(2017, 4, 27, 12, 0),
        endDate: new Date(2017, 4, 27, 14, 0)
    }, {
        text: "Upgrade Personal Computers",
        ownerId: [2],
        startDate: new Date(2017, 4, 27, 15, 15),
        endDate: new Date(2017, 4, 27, 16, 30)
    }, {
        text: "Customer Workshop",
        ownerId: [3],
        startDate: new Date(2017, 4, 28, 11, 0),
        endDate: new Date(2017, 4, 28, 12, 0),
        allDay: true
    }, {
        text: "Prepare 2017 Marketing Plan",
        ownerId: [1, 3],
        startDate: new Date(2017, 4, 28, 11, 0),
        endDate: new Date(2017, 4, 28, 13, 30)
    }, {
        text: "Brochure Design Review",
        ownerId: [4],
        startDate: new Date(2017, 4, 28, 14, 0),
        endDate: new Date(2017, 4, 28, 15, 30)
    }, {
        text: "Create Icons for Website",
        ownerId: [3],
        startDate: new Date(2017, 4, 29, 10, 0),
        endDate: new Date(2017, 4, 29, 11, 30)
    }, {
        text: "Upgrade Server Hardware",
        ownerId: [4],
        startDate: new Date(2017, 4, 29, 14, 30),
        endDate: new Date(2017, 4, 29, 16, 0)
    }, {
        text: "Submit New Website Design",
        ownerId: [1],
        startDate: new Date(2017, 4, 29, 16, 30),
        endDate: new Date(2017, 4, 29, 18, 0)
    }, {
        text: "Launch New Website",
        ownerId: [2],
        startDate: new Date(2017, 4, 29, 12, 20),
        endDate: new Date(2017, 4, 29, 14, 0)
    }, {
        text: "Stand-up meeting",
        ownerId: [1, 2, 3, 4],
        startDate: new Date(2017, 4, 25, 9, 0),
        endDate: new Date(2017, 4, 25, 9, 15),
        recurrenceRule: "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20170530"
    }
];

let resources: Resource[] = [
    {
        text: "jean-michel mocké",
        id: 1,
        color: "#cb6bb2"
    }, {
        text: "juan-michail mocké",
        id: 2,
        color: "#56ca85"
    }, {
        text: "jean-michel De mocké",
        id: 3,
        color: "#1e90ff"
    }, {
        text: "Bouffeur de Croissant mocké",
        id: 4,
        color: "#ff9747"
    }
];

@Injectable()
export class Service {
    getAppointments(): Appointment[] {
        return appointments;
    }
    getResources(): Resource[] {
        return resources;
    }
}

和我的app.component.ts 

import { NgModule, Component, enableProdMode } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Appointment, Resource, Service} from './calendrier.service';
import {DxSchedulerModule, DxCheckBoxModule, DxSelectBoxModule} from 'devextreme-angular';

if(!/localhost/.test(document.location.host)) {
    enableProdMode();
}

@Component({
    selector: 'calendrier',
    templateUrl: './calendrier.component.html',
    styleUrls: ['./calendrier.component.css'],
    providers: [Service]
})
export class calendrierComponent {
    appointmentsData: Appointment[];
    resourcesData: Resource[];
    switchModeNames: string[];

    onAppointmentFormCreated(data: any) {
            let form = data.form;
            form.itemOption("allDay","visible",false);
            form.itemOption("endDate","visible",false);
            form.itemOption("description","visible",false);
}

    constructor(service: Service) {
        this.switchModeNames = ["Tabs", "Drop-Down Menu"];

        this.appointmentsData = service.getAppointments();
        this.resourcesData = service.getResources();
    }
}



@NgModule({
    imports: [
        BrowserModule,
        DxSchedulerModule,
        DxCheckBoxModule,
        DxSelectBoxModule
    ],
    declarations: [calendrierComponent],
    bootstrap: [calendrierComponent]
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule)

感谢您的帮助！

0 个答案:

没有答案
相关问题
最新问题