绑定 Ngmodel 时，值未显示在 Angular 选择框中答案

【问题标题】：Values not displaying in Angular select box while binding Ngmodel绑定 Ngmodel 时，值未显示在 Angular 选择框中
【发布时间】：2020-11-05 00:03:05
【问题描述】：

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

【问题讨论】：

.sPermissionType 是拼写错误还是常规属性名称？

标签： html angularjs typescript

【解决方案1】：

用{{obj.viewValue}}代替{{permissionType.viewValue}}。

您选择obj 作为变量的迭代*ngFor="let obj of permissionType"。因此，您必须使用相同的变量进行值插值。

【讨论】：

【解决方案2】：

您应该将[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>

【讨论】：

【解决方案3】：

要获得正确的数据绑定，您必须将 ngModel 添加到 select 并删除选项的 selected 属性。

<div *ngIf="userPermissionObj">
 <select id="permission" [(ngModel)]="userPermissionObj.permissionType">
   <option *ngFor="let permission of permissionType"
    [value]="permission.value">
       {{permission.viewValue}}
   </option>
 </select>  
</div>

在你那里

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'}
];

【讨论】：