提问者:小点点

绑定Ngmodel时不在角度选择框中显示的值


我是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页面吗?


共3个答案

匿名用户

而不是

{{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>