Angular2 不能在 PUT 请求上传入多个参数。语法错误：意外的标记"在解析时..."

Question

我是Angular2，Typescript和OOP的新手。我有一项服务，可以使用三个参数：用户，一个ID和一个描述。我在Notes类中包含这些参数，并将其传递到服务中的updateDashNotesMethod()中，我正在执行PUT请求。Notes类被导入我的组件，并将其传递到我服务中updateDashNotesMethod的方法中。

我得到了400 error “SyntaxError: Unexpected token "at parse.......”。当我从我的服务和组件中登录控制台时，我只会得到"用户"。什么都没有通过。

我已经使用邮递员测试了这些端点，它们像魅力一样工作，所以我知道这是我做错的事情。

事先感谢您的帮助。

这是我的服务：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import { Notes } from './notes';
@Injectable()
export class CetoService {
constructor(private _http: Http) { }
updateDashNotesMethod(notes: Notes) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let url = `http://bla:4000/api/path/path/`;
console.log('From Service ' + JSON.stringify(notes));
return this._http
          .put(url, JSON.stringify(notes), {headers: headers})
          .map(res => res.json())
          .catch(this.handleError);
}
error response code.....

这是我的笔记班

export class Notes{
  user:string;
  query_id:number;
  description:string;
}

这是我的组件

import { Component, EventEmitter, OnInit, ElementRef, Directive, Input,  Output  } from '@angular/core';
import { CetoService } from '../services/ceto.service';
import { BrowserModule } from '@angular/platform-browser';
import { DashboardPipe } from '../filters/dashboard.pipe';
import { SharedqueryPipe } from '../filters/sharedquery.pipe';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { Notes } from '../services/notes';
@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css'],
   providers: [CetoService]
})
export class DashboardComponent implements OnInit {
constructor(private __dashdata: CetoService) {}
ngOnInit() {
}
updateDashNotes(notes: Notes){
  console.log('Passed in Object... ' + notes)
  this.__dashdata.updateDashNotesMethod(notes).subscribe()
}

和html

<form id="description_form">
    <textarea name="notes" [(ngModel)]="dashboard.txt_Description" class="form-control" type="text" rows="6"></textarea>
    <button type="submit" class="btn btn-primary btn-sm pull-right dash-btn" (click)="updateDashNotes(dashboard.txt_User_Name, dashboard.id_Query_ID, dashboard.txt_Description)">Save</button>
    <button class="btn btn-primary btn-sm pull-right dash-btn" (click)="cancelEdit(dashboard)" *ngIf="dashboard.isEditing">Cancel</button>                                             
 </form>

Answer 1

您的视图确实

(click)="updateDashNotes(dashboard.txt_User_Name, dashboard.id_Query_ID, dashboard.txt_Description)

但是该方法被称为

updateDashNotes(notes: Notes) {

因此，您没有将笔记实例传递给您的方法，而是通过3个参数。

我很惊讶您没有注意到仅通过查看控制台日志的输出而注意到这一点。您的浏览器开发工具的网络选项卡在这种情况下也非常有用。

另外，请注意，设置内容类型标题并串制参数是不必要的：Angular为您做到这一点。您需要的是

updateDashNotesMethod(notes: Notes) {
    let url = `http://bla:4000/api/path/path/`;
    return this._http
               .put(url, notes)
               .map(res => res.json())
               .catch(this.handleError);
}