显示 Angular 13 中下拉列表中的选定值
Display selected value from drop down list in Angular 13
这是我的代码:
<tbody *ngFor="let user of users">
<td>{{user.name}}:</td>
<td>
<ng-select [items]="userList" bindValue="id" formControlName='id' bindLabel="label">
<ng-template ng-option-tmp let-item="item">
<div [ngbTooltip]="item.label" placement="bottom">{{item.label}}</div>
</ng-template>
</ng-select>
</td>
</tbody>
userList: [
{ id: 1, label: 1 },
{ id: 2, label: 2 }
]
users: [
{ id: 5545, name: 'Z', value: 1 }
{ id: 1112, name: 'A', value: 2 },
{ id: 4455, name: 'B', value: 1 }
]
如果 userList.id == user.value 那么它的标签应该在下拉列表中选择。
当前结果:
预期结果:
找到解决方案。
formControlName='{{user.value}}' 而不是 formControlName='id' 对我有用。
<tbody *ngFor="let user of users">
<td>{{user.name}}:</td>
<td>
<ng-select [items]="userList" bindValue="id" formControlName='{{user.value}}' bindLabel="label">
<ng-template ng-option-tmp let-item="item">
<div [ngbTooltip]="item.label" placement="bottom">{{item.label}}</div>
</ng-template>
</ng-select>
</td>
</tbody>
这是我的代码:
<tbody *ngFor="let user of users">
<td>{{user.name}}:</td>
<td>
<ng-select [items]="userList" bindValue="id" formControlName='id' bindLabel="label">
<ng-template ng-option-tmp let-item="item">
<div [ngbTooltip]="item.label" placement="bottom">{{item.label}}</div>
</ng-template>
</ng-select>
</td>
</tbody>
userList: [
{ id: 1, label: 1 },
{ id: 2, label: 2 }
]
users: [
{ id: 5545, name: 'Z', value: 1 }
{ id: 1112, name: 'A', value: 2 },
{ id: 4455, name: 'B', value: 1 }
]
如果 userList.id == user.value 那么它的标签应该在下拉列表中选择。
当前结果:
预期结果:
找到解决方案。
formControlName='{{user.value}}' 而不是 formControlName='id' 对我有用。
<tbody *ngFor="let user of users">
<td>{{user.name}}:</td>
<td>
<ng-select [items]="userList" bindValue="id" formControlName='{{user.value}}' bindLabel="label">
<ng-template ng-option-tmp let-item="item">
<div [ngbTooltip]="item.label" placement="bottom">{{item.label}}</div>
</ng-template>
</ng-select>
</td>
</tbody>