0

我在我的 Angular 项目中使用 ng-select 并且我的实体有 Id 对象，这些对象本身就是对象。（Id 包含多个值）。

因此，例如作为项目输入，您将拥有一个如下所示的汽车数组：

let cars = [
   {
      id: { systemId: null, name: null }
      brand: null,
      type: null
   },
   {
      id: { systemId: null, name: null }
      brand: null,
      type: null
   }
];

所以对于车主我想设置汽车的carId而不绑定整个汽车对象。目前，当我使用 ng-select 时，它总是会选择他完整的汽车或仅选择一个值，如 systemId 或名称。

我尝试使用

bindValue='id'

但后来它说它不能绑定到一个对象。所以最后我想将 owner.carId 设置为 car.id 。目前我正在通过以下方式使用 ng-select 。

            <ng-select name="ownerCarId"
                       [items]="cars"
                       [(ngModel)]="owner.carId"
                       [compareWith]="compareBySystemId"
                       >
              <ng-template ng-label-tmp let-item="item">
                {{item.systemId + ' / ' + item.name}}
              </ng-template>
              <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
                {{item.systemId + ' / ' + item.name}}
              </ng-template>
            </ng-select>

有没有办法做到这一点？

4

2 回答 2

1

看起来我找到了两个解决方案。

我在 Anjum 的评论中注意到的第一个解决方案是创建一个包含汽车 ID 的 carIds 对象，并在 [items] 输入中提供它。

this.carIds = this.cars.map(car => car.id)

然后在 HTML

<ng-select [items]="carIds" [(ngModel)]="owner.carId" bindValue="systemId">
    <ng-template ng-label-tmp let-item="item">
        {{item.systemId + ' / ' + item.name}}
    </ng-template>
</ng-select>

我发现的第二个解决方案我认为可能是最好的一个，因为您不需要创建 carIds 数组来代替 [items] 输入。

所以 HTML 看起来像：

<ng-select [items]="cars" [(ngModel)]="owner.carId">
    <ng-option *ngFor="let car of cars" [value]="car.id">{{car.id.name}}></ng-option>
</ng-select>
于 2018-10-25T09:36:52.163 回答
0

请查看stackBlitz链接以获取示例演示。

简而言之，您的 app.component.html 应该有

<ng-select [items]="cars" [(ngModel)]="owner.carId" bindLabel="brand" bindValue="brand">
<ng-template ng-label-tmp let-item="item">
    {{item.brand + ' / ' + item.type}}
</ng-template>

你的 app.component.ts 应该是这样的

  cars
  owner={}

 constructor() {

this.owner = {carId : "My Owners Car ID", type:'Donald Duck' }

this.cars = [
  {
    id: { systemId: 121212, name: 'sysID1' },
    brand: 'Honda',
    type: 'CRV'
  },
  {
    id: { systemId: 22222, name: 'sysID2' },
    brand: 'Ford',
    type: 'Truck'
  }
]
}
于 2018-10-24T07:59:37.377 回答