简单 Post 请求 Angular 2 类型或型号

Question

现在我正在尝试提出一个简单的 post 请求。这是表格

<label for="name">Name</label>
<input type="text" id="value" [(ngModel)]="value" />
<input type="button" value="Get Name" (click)="getName(value)" />

这里是 .ts

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-home',
    templateUrl: './add-name.component.html'
})

export class FetchNameComponent {
    chosenName: string;
    constructor(
        private http: HttpClient
    )
    {
    }

    getName(value): void {
        this.chosenName = value
        alert(this.chosenName)
        this.http.post("NameItem", this.chosenName).subscribe(result => {
            console.log(result);
        }, error => console.error(error));
    }
}

我的警报显示了正确的值，所以我知道到目前为止一切正常

这是我的控制器

   [HttpPost]
        public String Post(String chosenName)
        {
            string newName = chosenName + "123";
            return newName;
        }

chosenName 始终为 null，所以出了点问题。我很好奇如何使用 angular2

将类型和对象发送到 post 请求中

如果我想通过它发送一个对象，它看起来会相似吗？

Answer 1

我假设后端是 C# .net。如果是这样，您的 api 期望的是查询字符串中的 'chosenName' 。所以，你 post url 应该是 /apiUrl/?chosenName="somename"

因此，您的 post 请求应如下所示：

this.http.post("/apiUrl/?chosenName=" + this.choosenName).subscribe(result => {
    console.log(result);
}, error => console.error(error));

但是如果你想 post 它在数据中而不是在 url 中，你可能需要修改你的 api。这是一个good article

然后，可以通过post传递更复杂的对象：

const data = {chooseName: this.chooseName, anotherValue: "someValue"};
this.http.post("/apiUrl/", data).subscribe(result => {
    console.log(result);
}, error => console.error(error));

简单 Post 请求 Angular 2 类型或型号

Simple Post Request in Angular 2 with type or model

model-view-controller

post

typescript

angular2-forms

angular