将形式发布到角度为2的Api

Question

我正在尝试使用参数将表单发布到api我怎么做。到目前为止我已经完成了。我很难做到这一点，但我希望从表单中获取值。我不知道我怎么做这个

码

 inviteUser() {
        let headers = new Headers();
        headers.append('Content-Type','application/json');
        let body = {
            "UserName": "user1",
            "Email": "user1@atea.com",
            "PartnerId": "1"
        };

        this.http.post('https://localhost:44300/api/apis/InviteUser', JSON.stringify(body), {
            headers: headers
        })
            .subscribe(
            data => this._data = data.json(),
            err => this.logError(err),
            () => console.log(body)
            );
    }

HTML

＆＃13;

＆＃13;

<h1>Pending Approvals </h1>
<link href="../../Content/bootstrap.css" rel="stylesheet" />
<link href="../../Content/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-offset-md-10">
            <button type="button" class="btn-u  pull-center" data-toggle="modal" data-target="#myModal">Invite User</button>
        </div>

    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Account Manager</th>
                            <th>Subscription</th>
                            <th>Created By</th>
                            <th>Pending</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let user of _data">
                            <th>{{user.AccountManagerId}}</th>
                            <th>{{user.SubscriptionId}}</th>
                            <th>{{user.CreatedBy}}</th>
                            <th>
                                <button type="button" class="btn btn-xs btn-danger" (click)="approvalPendingRequest(user.SubscriptionId)">
                                    <span class="glyphicon glyphicon-send"></span>&nbsp;
                                </button>
                            
                           </th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add New User</h4>
            </div>
            <div class="modal-body">
                <form (submit)='inviteUser()'>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" required
                                name="name">
                    </div>
                    <div class="form-group">
                        <label for="alterEgo">Email</label>
                        <input type="email" class="form-control" required
                                name="alterEgo">
                    </div>
                    <div class="form-group">
                        <label for="power">Partner</label>
                        <select class="form-control" 
                                 name="power">
                            <option *ngFor="let p of powers" [value]="p">{{p}}</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-default" data-dismiss="myModal">Invite</button>
                </form>
            </div>

        </div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

图像

Answer 1

您可以利用URLSearchParams类来实现此目的。这是一个示例：

let headers = new Headers();
headers.append('Content-Type','application/json');
let body = {
  "UserName": "user1",
  "Email": "user1@atea.com",
  "PartnerId": "1"
};

let params = new URLSearchParams();
params.set('param', 'value');

this.http.post('https://localhost:44300/api/apis/InviteUser',
     JSON.stringify(body), {
        headers: headers,
        search: params
     })
     .subscribe(
        data => this._data = data.json(),
        err => this.logError(err),
        () => console.log(body)
     );

请注意，从RC2，您可以直接向Angular2中的HTTP方法提供对象：

let body = {
  "UserName": "user1",
  "Email": "user1@atea.com",
  "PartnerId": "1"
};

let params = new URLSearchParams();
params.set('param', 'value');

this.http.post('https://localhost:44300/api/apis/InviteUser',
     body, {
        search: params
     })
     .subscribe(
        data => this._data = data.json(),
        err => this.logError(err),
        () => console.log(body)
     );

修改

如果您想发布表单，可以使用以下内容：

let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

let form = new URLSearchParams();
form.set('UserName', 'user1');
form.set('Email', 'user1@atea.com');
form.set('PartnerId', '1');

this.http.post('https://localhost:44300/api/apis/InviteUser',
     form.toString(), {
        headers: headers
     })
     .subscribe(
        data => this._data = data.json(),
        err => this.logError(err),
        () => console.log(body)
     );