Angular

Question

在我的 Angular-12 中，我有来自 API 端点的 JSON 响应：

{
  "message": "vehicle Model Detail.",
  "error": false,
  "code": 200,
  "results": {
    "vehiclemakes": [{
        "name": "Freightliner",
        "id": 15
      },
      {
        "name": "Honda",
        "id": 13
      },
      {
        "name": "Renault",
        "id": 3
      },
      {
        "name": "Suzuki",
        "id": 16
      },
      {
        "name": "Toyota",
        "id": 4,
      },
      {
        "name": "Volkswagen",
        "id": 6
      },
      {
        "name": "Volvo",
        "id": 5
      }
    ]
  }
}

服务：

public getParameters(): Observable<any> {
  return this.http.get(this.api.baseURL + 'parameters', this.httpOptions);
}

组件：

vehicles!: any[];

loadAllVehicles() {
  this.vehiclemodelService.getParameters().subscribe(
    data => {
      this.vehicles = data.results.vehicles;
    },
    error => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
    }
  );
}

ngOnInit(): void {
  this.loadAllVehicles();
}

我要将其加载到下拉列表 select 列表中：

HTML:

<ng-select [items]="vehicles"
   [selectOnTab]="true"
   [searchable]="true"
   bindValue="name"
   bindLabel="make_id"
   placeholder="Select Vehicle Make"
   [multiple]="false"
   [clearable]="true"
   required
   formControlName="make_id">
</ng-select>

当我加载表单并单击 select 下拉列表时，似乎有数据但没有显示任何内容。

我该如何解决这个问题？

谢谢

Answer 1

因为 this.vehicles 是异步填充的，所以 .subscribe() 就是这样工作的。当您的 ng-select 被呈现时，this.vehicles 不包含您的 api 响应。

处理此问题的简单方法：

html :

<ng-select [items]="vehicles$ | async"
     [selectOnTab]="true"
     [searchable]="true"
     bindValue="name"
     bindLabel="make_id"
     placeholder="Select Vehicle Make"
     [multiple]="false"
     [clearable]="true"
     required
     formControlName="make_id">
</ng-select>

ts :

vehicles$!: Observable<any[]>;

loadAllVehicles() {
  this.vehicles$ = this.vehiclemodelService.getParameters().pipe(
    map(data => data.results.vehicles)
    catchError(() => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
      return of(null);
   }),
  );
}

ngOnInit(): void {
  this.loadAllVehicles();
}

Answer 2

在您的示例数据中，属性被称为 results.vehiclemakes，而当您将值分配给 this.vehicles 时，您使用了 results.vehicles。所以，只需将其更改为：

this.vehicles = data.results.vehiclemakes;

Answer 3

问题

如@Nenad 所述，results.vehicles 在您的 JSON 中无效。你必须使用 results.vehiclemakes.
make_id 在 vehiclemakes 的对象中无效 。同时，bindLabel 属性用于显示标签，而 bindValue 用于显示值。使用现有代码，生成的选项将显示 id 作为标签，name 作为值.

<ng-select bindValue="name"
     bindLabel="make_id">
</ng-select>

解决方案

将 vehicles 分配给 data.results.vehiclemakes。
将 bindLabel 设置为 name，将 bindValue 设置为 id。

.component.ts

loadAllVehicles() {
  this.vehiclemodelService.getParameters().subscribe(
    data => {
      this.vehicles = data.results.vehiclemakes;
    },
    error => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
    }
  );
}

.component.html

<ng-select [items]="vehicles"
     [selectOnTab]="true"
     [searchable]="true"
     bindValue="id"
     bindLabel="name"
     placeholder="Select Vehicle Make"
     [multiple]="false"
     [clearable]="true"
     required
     formControlName="make_id">
</ng-select>

Sample Solution on StackBlitz

Angular - Select 下拉列表为空

Angular - Select dropdown list is blank

typescript

angular12

angular-ngselect

问题

解决方案