Question

我认为我在价值绑定方面遇到问题。我的页面上目前有2个下拉菜单。页面的其余部分正在使用PrimeNg for UI，并希望使这些下拉菜单与页面的其余部分相同。我应该如何进行这项工作。

一个下拉列表是一个主管列表。

<div class="ui-g form-group">
  <label for="supervisors">Supervisors * </label>
  <select 
    class="form-control"
    id="supervisors" 
    required
    [(ngModel)]="model.supervisor"
    name="supervisor"
  >
    <option *ngFor="let sup of supervisors" [value]="sup">
      {{sup}}
    </option>
    <div
      [hidden]="supervisors.valid || supervisors.pristine"
      class="alert alert-danger"
    >
      Supervisor is required
    </div>
  </select>
</div>

另一个是请假代码列表

<div class="ui-g-12 ui-md-1" id="test">
   <label for="codes">Leave Codes * </label>
   <select 
     class="form-control"
     id="codes"
     placeholder="Select Leave Code *"
     required 
     [(ngModel)]="model.code" 
     name="code"
    >
      <option *ngFor="let cod of codes" [value]="cod">{{cod}}</option>
    </select>
</div>

我从.ts文件中调用了2个值数组

supervisors = ['Alex',"Jones",'Joe','Rogan'];
codes = ['Personal Leave','Vacation Leave', 'Sick Leave'];

使用标签时，我会得到一个空的下拉列表。我最初只是尝试使用，但是后来我无法获得必填字段以进行验证。

Answer 1

您导入了DropdownModule吗？

import {DropdownModule} from 'primeng/dropdown';

请参见documentation，html绑定应为

<p-dropdown [options]="supervisorList" [(ngModel)]="supervisor"></p-dropdown>

其中supervisorList在控制器中将定义为SelectItem，并且必须采用标签+值格式。

supervisorList: SelectItem[];
this.supervisorList= [
            {label: 'Alex', value: 'Alex'},
            ...
];

将<p-dropdown>与表单控件一起使用

1 个答案: