角度2のUpdate/PUT json

Question

私は、角度2のupdate/PUTに問題があります。member-detail.component.tsファイルに関数updateMember（）を作成します。

app/members/member-detail.component.ts(51,42): error TS2345: Argument of type 'Member[]' is not assignable to parameter of type 'Member'. Property '_id' is missing in type 'Member[]'. 
app/members/member-detail.component.ts(53,17): error TS7006: Parameter 'res' implicitly has an 'any' type. 
app/members/member-detail.component.ts(56,17): error TS7006: Parameter 'error' implicitly has an 'any' type. 

member.model

export class Member { 
constructor(
    public _id: string, 
    public name: string, 
    public old: number 
) { } 
} 

members.service

：tslintコードは、いくつかのエラーを返すcosoleとき機能は、正しいオブジェクトを取得し、それをサーバーに送るが、

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Member } from './member'; 
import { Observable } from 'rxjs/Rx'; 

// Import RxJs required methods 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 


@Injectable() 
export class MembersService { 

private apiUrl = 'http://localhost:3000/api/members'; 

constructor(private http: Http) { } 

... 

updateMember(member: Member): Observable<Member[]> { 
    let body = JSON.stringify(member); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.put(`${this.apiUrl}/${member._id}`, body, options) 
     .map(this.extractData) 
     .catch(this.handleError); 
} 


private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || {}; 
} 


private handleError (error: Response | any) { 

    // In a real world app, we might use a remote logging infrastructure 
    let errMsg: string; 

    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 

    console.error(errMsg); 
    return Observable.throw(errMsg); 

} 


} 

メンバー-detail.componentあなたMemberDetailComponentインサイド

import { Component, OnInit, Input, trigger, state, style, transition, animate, keyframes } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 

import { Observable } from 'rxjs/Observable'; 

import { Member } from './member'; 
import { MembersService } from './members.service'; 

@Component({ 
moduleId: module.id, 
selector: 'member-detail', 
templateUrl: 'member-detail.component.html', 
styleUrls: [ 'member-detail.component.css' ], 
animations: [ 
    trigger('showContent', [ 
     transition('void => *', [ 
      animate(500, keyframes([ 
       style({opacity: 0, offset: 0}), 
       style({opacity: 0.01, offset: 0.99}), 
       style({opacity: 1, offset: 1}), 
      ])) 
     ]) 
    ]) 
] 
}) 
export class MemberDetailComponent implements OnInit { 

member: Member[]; 
errorMessage: string; 

constructor(private route: ActivatedRoute, private membersService: MembersService) { } 

... 

// function update but not tslint correct 
updateMember() { 
    this.membersService.updateMember(this.member) 
     .subscribe(
      res => { 
       this.member = res; 
      }, 
      error => this.errorMessage = <any>error 
     ); 
} 


} 

Answer 1

、あなたが持っているMemberさん

export class MemberDetailComponent implements OnInit { 

member: Member[]; <--- 

のarrayを意味し、あなたが与えているタイプMember[]であるmemberという名前のフィールドこれはupdateMemberメソッドへの入力として

this.membersService.updateMember(this.member) <--- 

が入力されていますが、タイプはMemberです。

updateMember(member: Member): Observable<Member[]> { <--- 

Answer 2

私は解決策を見つけましたが、それはあまりよくないので、誰かがより良い提案を共有している場合は！

私はMemberDetailComponent()内に新しい変数newMember: any;を追加し、this.memberからnewMemberにオブジェクトを参照し、私の新しいコードの下​​

でそれを使用します。

メンバー-detail.component.ts

import { Component, OnInit, trigger, state, style, transition, animate, keyframes } from '@angular/core'; 
 
import { ActivatedRoute, Params } from '@angular/router'; 
 

 
import { Observable } from 'rxjs/Observable'; 
 

 
import { Member } from './member'; 
 
import { MembersService } from './members.service'; 
 

 
@Component({ 
 
    moduleId: module.id, 
 
    selector: 'member-detail', 
 
    templateUrl: 'member-detail.component.html', 
 
    styleUrls: [ 'member-detail.component.css' ], 
 
    animations: [ 
 
     trigger('showContent', [ 
 
      transition('void => *', [ 
 
       animate(500, keyframes([ 
 
        style({opacity: 0, offset: 0}), 
 
        style({opacity: 0.01, offset: 0.99}), 
 
        style({opacity: 1, offset: 1}), 
 
       ])) 
 
      ]) 
 
     ]) 
 
    ] 
 
}) 
 
export class MemberDetailComponent implements OnInit { 
 
    
 
    member: Member[]; 
 
    errorMessage: string; 
 
    newMember: any; // new variable 
 

 
    constructor(private route: ActivatedRoute, private membersService: MembersService) { } 
 

 
    ngOnInit() { 
 
     this.getMember(); 
 
    } 
 

 
    getMember(): void { 
 
     this.route.params.subscribe(params => { 
 
      if (params['id'] !== undefined) { 
 
       this.membersService.getMember(params['id']) 
 
        .subscribe( 
 
         member => { this.member = member }, 
 
         error => this.errorMessage = <any>error, 
 
         () => this.newMember = this.member 
 
        ); 
 
      } 
 
     }); 
 
    } 
 

 
    updateMember(): void { 
 
     this.membersService.updateMember(this.newMember) 
 
      .subscribe(
 
       res => this.newMember = res, 
 
       error => this.errorMessage = <any>error, 
 
       () => this.getMember() 
 
      ); 
 
    } 
 
    
 
}