Привязка ng-select к объекту внутри объекта - PullRequest
Новая
       11

Привязка ng-select к объекту внутри объекта

0 голосов
/ 24 октября 2018

Я использую ng-select в своем проекте Angular, и у моих сущностей есть объекты 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 или name.

Я пытался использовать 

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>

Есть ли способ сделать это?

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

Похоже, я нашел два решения.

Первое решение, которое я нашел, как отмечалось в комментарии к ответу Anjum ..., - создать объект 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>
0 голосов
/ 24 октября 2018

Пожалуйста, проверьте 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'
  }
]
}
...