将ng-select绑定到对象内部的对象

时间:2018-10-24 07:29:34

标签: angular angular-ngselect

我在Angular项目中使用ng-select,并且我的实体具有Id对象,这些对象本身就是对象。 (该ID包含多个值)。

例如,作为项目输入,您将具有如下所示的cars数组:

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 :(得分: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'
  }
]
}

答案 1 :(得分:0)

好像我找到了两个解决方案。

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

Sub filtersum()

Dim filterA As Variant, filterB As Variant
    filterA = Cells(2, 1)
    filterB = Cells(3, 1)

Dim k As Long, n As Long, h As Long
    k = Cells.Find("Type").Offset(1, 0).Row
    n = Cells.Find("Type").End(xlDown).Row
    h = Cells.Find("Filter").End(xlDown).Row 'last row for column A, searching for "Filter"

Dim sum As Double
    sum = 0 'Sum variable


Dim g As Long, i As Long, j As Long
Dim filterCriteria As Variant 'Define your criteria it should look up


For g = k To h 'Look up for Filter column, from the same start cell as "Type" column to the same end cell as "Type". Then loop through all criterias.
    filterCriteria = Cells(g, 1).Value 'Get current criteria value
    For i = k To n 'Loop through column Type
        If Cells(i, 3) = filterCriteria Then 'If Type = filter criteria, then sum.
            j = Cells(i, 2) 'I think you have an typo in your example here, since sum should be done on column B, not column C.
            sum = j + sum 'Sum the values.
        End If
    Next i 'take next value in column C, "Type" column
Next g 'take next value in column A, "Filter" column
Cells(2, 4).Value = sum    'Result under "Total"
End Sub

然后在HTML中

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

我发现第二种解决方案可能是最好的解决方案,因为您不需要创建carIds数组,而不必使用[items]输入。

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>