我是angular的初学者,当我尝试在选择框中循环显示对象时,它没有显示任何值。 仅显示空白下拉列表,
我的html页面如下所示,
<div *ngIf="userPermissionObj">
<select id="permission">
<option *ngFor="let obj of permissionType"
[value]='permissionType.value'
[selected]="userPermissionObj.sPermissionType == obj.value ? true : null">
{{permissionType.viewValue}}
</option>
</select>
</div>
我的组件ts文件包含如下代码,
getUserPermisionsByUsernameSearch()
{
var param:string=this.permissionRequestUser;
this.manageuserService.getUserPermissionApiMethod(param)
.subscribe((data:any)=> {this.userPermissionObj=data;});
}
permissionType = [
{value: 'R', viewValue: 'Read'},
{value: 'W', viewValue: 'Write'}
];
有谁能帮我找出我错误地实现了我的html页面吗?
而不是
{{permissionType.viewValue}}
使用
{{obj.viewValue}}.
您选择obj作为变量的迭代*ngfor=“let obj of permissionType”
。 所以您必须使用相同的变量进行值插值。
为了实现正确的数据绑定,您必须向select添加一个ngModel并删除选项的selected属性。
<div *ngIf="userPermissionObj">
<select id="permission" [(ngModel)]="userPermissionObj.permissionType">
<option *ngFor="let permission of permissionType"
[value]="permission.value">
{{permission.viewValue}}
</option>
</select>
</div>
在you ts中
getUserPermisionsByUsernameSearch(): void
{
const param:string=this.permissionRequestUser;
this.manageuserService.getUserPermissionApiMethod(param)
.subscribe((data:any)=> {
this.userPermissionObj = data;
});
}
permissionType = [
{value: 'R', viewValue: 'Read'},
{value: 'W', viewValue: 'Write'}
];
应将[value]='permissionType.value'
替换为[value]='Obj.value'
,将{{permissionType.ViewValue}}
替换为{{Obj.ViewValue}}
,因为permissionType是正在使用的数组。 所以你的HTML应该是这样的
<div *ngIf="userPermissionObj">
<select id="permission">
<option *ngFor="let obj of permissionType"
[value]='obj.value'
[selected]="userPermissionObj.sPermissionType == obj.value ? true : null">
{{obj.viewValue}}
</option>
</select>
</div>