Question

我一直在阅读并发现这个问题有很多变化，但我还没有找到一个有效的。这是我的HTML：

<select [ngModel]="selectedDepartment" (ngModelChange)="onChange($event)">
   <option *ngFor="let department of Directory.categories" [ngValue]="department.id">{{department.option}}</option>
</select>

我的部门。选项列表包括：＆＃39;所有部门＆＃39;部门＆＃39;部门＆＃39;部门2＆＃39;部门。现在，下拉菜单以空白选择开始，如果单击下拉箭头，则只能看到选项。因此，下拉列表的确如下：空白，“所有部门”，“部门一号”等等。我希望它能够使用“所有部门”和“＃39;所有部门＆＃39;作为默认值。我已经尝试过我在这里找到的所有解决方案，但还没有找到实际可行的方法。虽然this问题与我的问题非常相似，但该页面上的解决方案都没有适用于我的项目。

更新:(解决方案）

<select [ngModel]="selectedDepartment" (ngModelChange)="onChange($event)">
    <option *ngFor="let department of Directory.categories" [ngValue]="department">{{department.option}}</option>
</select>

ngOnInit() {
    this.selectedDepartment = this.Directory.categories[0];
}

BUT 现在，我的onChange($event)正在将对象传递给onChange函数，因此我的管道过滤器无法正常工作。使用[ngValue]="department.id"和this.Directory.categories[0].id;

修复了此问题

Answer 1

如果你有像[(ngModel)]="selectedDepartment这样的双向数据绑定，你也可以在组件ts文件中设置它

selectedDepartment = 1;

，它将默认为该值

Answer 2

试试这个

<select [ngModel]="selectedDepartment" (ngModelChange)="onChange($event)">
   <option *ngFor="let department of Directory.categories; let i = index" [ngValue]="department.id" [selected]="i === 0 ? 'true' : 'false'">{{department.option}}</option>
</select>

基本上，您说如果它是第一个选项，则将其属性设置为选中。

Answer 3

我已将值包含在下拉列表中

＆＃13;

  On your ts file 
  
      directory:any; 
    this.Directory = [{option: '--sel--', value: 0}];

＆＃13;

<select class="selectedDepartment"[(ngModel)]="electrify" (ngModelChange)="electrifyonChange($event)">
               <option *ngFor="let let department of Directory.categories" [ngvalue]="department.id">{{department.option}} </option>
          </select>

＆＃13;

下拉列表更改

3 个答案: