正在获取对Angular Input字段的JSON响应?

时间:2018-10-25 11:22:07

标签: angular angular6

何时从服务器返回JSON响应?如何将返回的数据提取到Angular 6的文本框中?

根据要求,我附上了以下代码!请好好研究一下!

Component.html

<app-modal-basic #modalDefault>
    <div class="app-modal-header">
      <h4 class="modal-title"> {{ brandname }} Details</h4>
      <button type="button" class="close basic-close" (click)="modalDefault.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="app-modal-body">
      <div class="container">
        <form>
          <div class="form-group row">
              <label for="brand" class="col-sm-3 col-form-label font-weight-bold">Brand ID</label>
              <div class="col-sm-5">
                <input type="text" class="form-control" value="{{brand.brandId}}" id="brand" minlength="3" readonly>
              </div>
          </div>

          <div class="form-group row">
              <label for="brand" class="col-sm-3 col-form-label font-weight-bold">Brand</label>
              <div class="col-sm-5">
                <input type="text" name="brandname" value="{{brand.brand}}" class="form-control" id="brand" minlength="3" >
              </div>
          </div>

        </form>
      </div>
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default waves-effect" (click)="modalDefault.hide()">Close</button>
      <button type="button" class="btn btn-primary waves-effect waves-light ">Update</button>

    </div>
  </app-modal-basic>

TS文件

 findybrandid(brandid: number) {

    this.brandService.getbrandid(brandid)
      .subscribe(data => console.log(data),
          error =>  console.log(error));   
 }

I have given the output and my requirement

1 个答案:

答案 0 :(得分:0)

更新:

在您的代码上未将服务返回值分配给您的品牌对象。

 findybrandid(brandid: number) {

  this.brandService.getbrandid(brandid).subscribe(
    data => this.brand = data, // like this
    error =>  console.log(error));   
}

请 提供一些代码以更好地理解。 无论如何,按照我的解释。

我想您将使用一种服务来检索API数据。 在使用中,您会遇到以下情况:

getClient(): Observable<Cliente> {
   return this.http.get<Cliente>(`${this.url}/client/1`)
}

此方法返回组件的Observable对象。在componente中,您可以执行以下操作:

getClient() {
this.clienteService.getClient().subscribe(
  res => {
    this.cliente = res; // add service return to your attribute      
  },
  err => {
    console.log(err);
  }
)}

这样,您可以获取服务响应数据并分配给文本框:

<input type="text" name="name" value="{{cliente.name}}" />

This guide详细说明如何在Angular中显示数据。