首页 > 解决方案 > 如何将 http 服务调用返回的值绑定到 Angular6 中 UI 中的字段下拉列表

问题描述

一旦我调用邮政服务,我会收到如下发布的响应,我从这里获得的银行名称的数据我想用作我的 UI 中下拉字段的选择值我如何将这些值绑定到一个对象,所以我可以在 UI 上做同样的插值。提前致谢。

"data":[{"bankCode":"1","bankName":"A AND N STATE CO OPERATIVE BANK LTD"},{"bankCode":"2","bankName":"A B E CO OPERATIVE BANK LTD"},{"bankCode":"3","bankName":"A C C BANK"}...

我已经尝试过这种方式,但出现以下错误

错误错误:找不到类型为“对象”的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables,例如 Arrays。

这是我的服务代码-:

getIncCompany(): Observable<PolicyData> {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json'});
  let body = '{}';
  return this.http
  .post<PolicyData>(this.apiUrl, body, { headers: headers })
    .pipe(
      tap(data => console.log('getIncCompany: ' + JSON.stringify(data))),
      catchError(this.handleError)
    );
}

这是组件代码

getIncCompany() {
    this.policyService.getIncCompany()
    .subscribe(data => { 
     this.policyinc = data,
    (error: any) => this.errorMessage = <any>error,
    console.log(this.policyinc);
    }
            // this.vehicleDetailsForm.reset(),
);
    }

这是html模板代码

<div class="col-lg-4 m-form__group-sub">
                                            <mat-form-field class="example-full-width" appearance="outline">
                                                <mat-label> Handicapped Discount
                                                </mat-label>
                                                <mat-select placeholder="Select">
                                                    <mat-option value="option" *ngFor="let polB of policyinc">{{ polB.bankName }}</mat-option>
                                                </mat-select>
                                            </mat-form-field>
                                        </div>

标签: httpangular6angular-httpclientangular-material-6

解决方案


推荐阅读