时间戳

首页 > 解决方案 > 绑定 Ngmodel 时，值未显示在 Angular 选择框中

html - 绑定 Ngmodel 时，值未显示在 Angular 选择框中

问题描述

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

标签： htmlangularjstypescript

解决方案

您应该替换[value]='permissionType.value'by[value]='obj.value'和{{permissionType.viewValue}}by{{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>

推荐阅读