跌落onChange

Question

我一直在阅读，发现这个问题有很多不同的地方，但我还没有找到一个起作用的。这是我的HTML：

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

我的department.option列表包括：“所有部门”、“部门一”和“部门二”。现在，下拉列表以空白选择开始，只有单击下拉箭头才能看到选项。因此，下拉列表的作用实际上是:空白、“所有部门”、“部门一”等等。我希望它使用“所有部门”作为默认设置。我已经尝试过我在这里找到的每一个解决方案，但是还没有找到真正有效的方法。尽管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];
}

但是现在的，我的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>

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

Answer 3

我已经将下拉列表包含了值。

​

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

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

​