2017-07-11 5 views
1

私は約束を使って私のアプリをApiに接続しようとしています。 アップデート方法はうまくいっていますが、アップデートはうまくいきませんでした。 ここにある:アップデートにはangular4のhttp.putメソッド

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

@Injectable() 

export class Croissants { 
    text: string; 
    ownerId: number[]; 
    startDate: Date; 
    endDate: Date; 
} 

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


export class EventService { 

    constructor(private http: Http) {} 

    getCroissants() { 
     return this.http.get('http://localhost:8080/v0/croissants') 
        .toPromise() 
        .then(res => <any[]> res.json().data) 
        .then(data => { return data; }); 
    } 

    updateCroissants(ownerId, startDate, endDate, text) { 
     return this.http.put('http://localhost:8080/v0/croissant' + ownerId + startDate + endDate + text) 
        .toPromise() 
        .then(res => <any[]> res.json().data) 
        .then(data => { return data; }); 
    } 

    deleteCroissants(ownerId) { 
     return this.http.delete('http://localhost:8080/v0/croissant' + ownerId) 
        .toPromise() 
        .then(res => <any[]> res.json().data) 
        .then(data => { return data; }); 
    } 

    getPersonnes() { 
     return this.http.get('http://localhost:8080/v0/persons') 
        .toPromise() 
        .then(res => <any[]> res.json().data) 
        .then(data => { return data; }); 
    } 

} 

それは言う: 助けを

「指定されたパラメータは、コールのターゲットのいずれかの署名と一致しません」私はコンポーネントを与える:

import { NgModule, Component, enableProdMode } from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 

import {Croissants, Personnes, 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 { 
    CroissantsData: Croissants[]; 
    currentDate: Date = new Date(2015, 4, 25); 
    PersonnesData: Personnes[]; 
    switchModeNames: string[]; 

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

     this.CroissantsData = service.getCroissants(); 
     this.PersonnesData = service.getPersonnes(); 
     console.log(this.CroissantsData); 
    } 
} 

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

platformBrowserDynamic().bootstrapModule(CalendrierModule) 

あなたがそれを気にしたいと思えば、私のすべてのコードは私のギブスで利用できます:

https://github.com/MehdyDriouech/Croissantboard

助けのために非常に非常に感謝

+0

'this.http.put( 'にhttp:// localhost:8080/V0 /クロワッサン+ 'id、' ') 'これは何? idが定義されている場合、どうすればよいでしょうか? 'http:// localhost:8080/v0/croissants/1'のようなもの? – echonax

+0

これは更新したいイベントのIDです。それは他のコンポーネントにあります。私はこのシンセックスを使って正しいのですか? だから、それが定義されているとき、あなたの書いたもののように見えます。 – moonshine

+0

それは 'this this.ttp.put( 'http:// localhost:8080/v0/croissants /' + id) IDを提供する? – echonax

答えて

1

updateCroissants方法は、あなたがそれを呼び出している場所からidパラメータを取る必要があります。

だから、それは次のようになります。

//service 
updateCroissants(id) { 
     return this.http.put('http://localhost:8080/v0/croissants/' + id) 
        .toPromise() 
        .then(res => <any[]> res.json().data) 
        .then(data => { return data; }); 
} 

そして、あなたはこの関数を呼び出している:

//component 
this.service.updateCroissants("42").then((res)=> console.log(res));