Question

我有2个JSON，我想在html中显示名称，而不是id_conutry

Country:

<!-- language: lang-json -->
{
  "StatusCode": 0,
  "StatusMessage": "OK",
  "StatusDescription": [
    {
      "country_id": 5,
      "name": "afghanistan",
      "short_name": "af"
    },
    {
      "country_id": 6,
      "name": "albania",
      "short_name": "al"
    },
    {
      "country_id": 7,
      "name": "algeria",
      "short_name": "dz"
    },
    {
      "country_id": 8,
      "name": "american samoa",
      "short_name": "as"
    },
    {
      "country_id": 9,
      "name": "andorra",
      "short_name": "ad"
    },
    {
      "country_id": 10,
      "name": "angola",
      "short_name": "ao"
    },
    .....
    {
      "country_id": 314,
      "name": "countrytestcreated",
      "short_name": "supt"
    }
  ]
}

*客户端：

let res = response.json();--> console.log(res)*


 {
      "StatusCode": 0,
      "StatusMessage": "OK",
      "StatusDescription": [
        {
          "client_id": "1",
          "client_name": "test test",
          "contactno": "123",
          "note": "Test again
          "email": "123@live.com",
          "country_id": 9,
          "active": 1
        }
      ]
    }

所以，我想用HTML显示：

client_name：test test，电子邮件：123@live.com，名：安道尔

我也和班级：

export class Client {
  client_id: string;
  client_name: string;
  contactNo: string;
  note: string;
  email: string;
  active: number;
  country: Country[]; 
}

export class Country {
  country_id : string;
  name: string;
}

我尝试在表单中修补值。为此，我尝试了这段代码：

populateForm() {
  this.activatedRoute.params.subscribe(
    params => {
      this.clientService.clientgetbyid(params['id']).subscribe(
        client => {
          this.client = client;
          this.editClientForm.controls['client_name'].setValue(client.clientName);
          this.editClientForm.controls['email'].setValue(client.email);
          this.editClientForm.patchValue({
            country_id: client.country.map(x => x.name)
          })
        }
      );
    }
  );
}

我的服务：

public clientgetbyid(id: string): Observable<Client> {
  // ...
  return this.http.post(Api.getUrl(Api.URLS.clientgetbyid), body, {
    headers: headers
  })
  .map((response: Response) => {
    let res = response.json();
    console.log(res) // show correctly my data
    if (res.StatusCode === 0) {
      return new Client(res.StatusDescription[0]);
    } else if (res.StatusCode === 1) {
      this.auth.logout();
    } else {
      return new Client(null);
    }
  });
}

我得到的错误是：

ERROR TypeError：client.country.map不是函数

我的HTML格式：

<form [formGroup]="editClientForm">
  <div class="row">
    <div class="input-field col s12">
      <input formControlName="client_name" id="client_name" type="text" class="validate" required=true>
      <label for="client_name">Client Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input formControlName="contactNo" id="contactNo" type="number" class="validate">
      <label for="contactNo">Contact Number</label>
    </div>
 </div>
  <input formControlName="country_id" id="country_id" matInput placeholder="Select Country*" aria-label="State" [matAutocomplete]="auto"
    autoActiveFirstOption [formControl]="country">
  <mat-autocomplete #auto="matAutocomplete" >
    <mat-option (onSelectionChange)="updateForm($event, country.country_id, 'country_id')" *ngFor="let country of filteredOptionsCountry | async"
      [value]="country.name">
      {{ country.name }}
    </mat-option>
  </mat-autocomplete>
  <div id="edit_client_button_container" class="row">
    <button [type="submit" class="btn waves-effect waves-light">
      Update
    </button>
  </div>
</form>

你能建议我解决一下吗？谢谢

Answer 1

在您打印回复时，您的回复中不存在国家/地区数组，因此为了避免错误，您应该通过执行以下操作检查是否存在

  if(client.country && client.country.length > 0)
  {
     this.editClientForm.patchValue({
        country_id: client.country.map(x => x.name)
      });
  }

我的回答是基于您的日志输出，没有国家/地区数组

 {
  "StatusCode": 0,
  "StatusMessage": "OK",
  "StatusDescription": [
    {
      "client_id": "1",
      "client_name": "test test",
      "contactno": "123",
      "note": "Test again
      "email": "123@live.com",
      "country_id": 9,
      "active": 1
    }
  ]
}

错误TypeError：client.country.map不是函数

1 个答案: