Angular中如何将组件输入框数据传递至服务用于POST请求

看起来你已经搞定了输入框值的获取，核心问题出在服务里的POST请求参数传递逻辑，还有组件里的一些小细节，我一步步帮你修正：

1. 修正服务中的POST请求参数顺序 #

Angular（老版本如Angular 4/5）的Http.post方法参数规则是：post(url: string, body: any, options?: RequestOptionsArgs)，你现在错误地把userId和postdata当成了两个独立参数传递，正确的做法是把用户ID合并到请求体里，再按规则传参。

修改service.ts的getValidUser方法：

getValidUser(userId: string): Observable<Response>{
  // 将输入的用户ID合并到请求体数据中
  let postdata = { 
    'isContractor': false, 
    "assetNo" : "", 
    "assetType" : "", 
    "ifAnycustodian" : "",
    "userId": userId // 新增这一行，把用户ID加入请求体
  };
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });
  // 按正确顺序传递参数：url、请求体、请求选项
  return this.http.post('http://localhost:60623/AssetServices.svc/ValidUser/', postdata, options)
    .map((res:Response) => res.json())
    .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

2. 补全组件变量声明与响应解析逻辑 #

你的组件里用了validuser和isval但没提前声明，而且后端返回的IsUserValidResult是JSON字符串，需要二次解析才能拿到结构化数据：

修改component.ts：

import { Component, OnInit} from '@angular/core';
import {MatDialog} from '@angular/material';
import { FileUploader } from 'ng2-file-upload';
const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
import{AssetService} from './asset.service';
import {KeysPipe} from './keys.pipe';
import {ObjtoarrPipe} from './objtoarr.pipe';
import { Observable } from 'rxjs/Observable'; // 别忘了引入Observable

@Component({
  selector: 'app-my-asset-page',
  templateUrl: './my-asset-page.component.html',
  styleUrls: ['./my-asset-page.component.css']
})
export class MyAssetPageComponent implements OnInit {
  public empno : string;
  // 声明缺失的变量
  public validuser: any;
  public isval: any;

  onKey(value: string) {
    this.empno = value;
    console.log(this.empno);
  }

  constructor(private assetser : AssetService) { }

  ngOnInit() {
    // 组件初始化逻辑（按需添加）
  }

  validateuser() {
    // 先判断输入是否为空，避免无效请求
    if (!this.empno) {
      console.log('请输入员工编号/邮箱/AD ID');
      return;
    }
    this.assetser.getValidUser(this.empno).subscribe(res=> {
      this.validuser = res;
      // 解析返回结果中的JSON字符串
      this.isval = JSON.parse(this.validuser.IsUserValidResult);
      console.log(this.isval);
    }, error => {
      console.error('请求出错：', error);
    });
  }
}

3. 简化HTML的事件绑定 #

你同时用了(keyup)和[(ngModel)]，其实双向绑定已经能自动同步输入值，不需要额外的onKey方法，可以简化：

<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 no_pad">
  <label class="col-xs-12 no_pad">Primary user</label>
  <form class="col-xs-12 pdngLeft0 example-form">
    <mat-form-field class="col-xs-12 no_pad example-full-width">
      <input matInput placeholder="Enter employee no/email ID/AD ID" 
             (change)="validateuser()" 
             name="empno" 
             [(ngModel)]="empno" 
             class="col-xs-12 no_pad">
    </mat-form-field>
  </form>
</div>

现在测试一下：输入框的值会通过双向绑定同步到empno，触发change事件后，组件会把empno传给服务，服务将其打包进请求体发送给后端，最后能正确解析返回的用户数据啦~

内容的提问来源于stack exchange，提问作者nikhil