Question

我想以角度2显示所选用户的数据。我提供服务以从API获取数据

   getUserById(id: string): Promise<User> {   
   const url ='api/user/${id}';   
   return this.httpClient.get(url)
    .toPromise()
    .then(response => response.json() as User)
    .catch(this.handleError);   }

这是我的控制器

 user: User;

  constructor(private userService: UserService) {
    userService.getUserById('45835708-f55a-40fb-878f-33b9c920e196')
    .then(hasil => this.user = hasil)
    .catch(this.handleError);
  }

这是我的模板

  <div class="form-group">
      <label class="col-sm-2 control-label">FULL NAME</label>
      <div class="col-sm-6">
        <input  class="form-control"  type="text" value="" disabled>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">USER NAME</label>
      <div class="col-sm-6">
        <input class="form-control"  type="text" value="" disabled>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">PASSWORD</label>
      <div class="col-sm-6">
        <input class="form-control"  type="password" value="" disabled>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">DATE OF BIRTH</label>
      <div class="col-sm-6">
        <input class="form-control"  type="text" value="" disabled>
      </div>
    </div>

如何将json显示到我的模板？我是否提供正确的服务和控制器？

Answer 1

您可以选择使用模板驱动表单或反应驱动表单。

ms-appx-web对象可以是该表单的模型，当您在html输入元素中输入内容时，对象将自动更新：

this.user

如果您想添加一些验证器，您应该使用Reactive表单： https://angular.io/docs/ts/latest/guide/reactive-forms.html

这里的原则是创建一个表单组并使用它们的初始值和验证器定义各个属性。

Answer 2

首先确保您的模块中已导入FormsModule。然后......记得使用ngModel将user绑定到表单。

但是，除非每个字段都有ngModel属性，否则表单不关心name：

<input  class="form-control" name="fullName" [ngModel]="user.fullName">

或

每个字段中

ngModelOptions：

<input  class="form-control" [ngModelOptions]="{standalone: true}" [ngModel]="user.fullName">

以下是使用name属性的演示：

如何获取json并通过用户ID显示它

2 个答案:

的 Plunker