Dropdowns 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リストには含まれています： 'すべてのカテゴリー'、 '部署ワン'、および '部門2つの'。現在、ドロップダウンは空白の選択から始まり、ドロップダウン矢印をクリックするとオプションが表示されます。したがって、ドロップダウンは実際には空白、「すべての部署」、「部門1」などのように動作します。デフォルトでは「すべての部署」を使用します。 私はここで見つけたすべてのソリューションを試しましたが、実際に動作するものをまだ見つけていません。 this質問は鉱山と非常に似ていますが、そのページの解決策は私のプロジェクトでは役に立たなかった。

UPDATE：（ソリューション）

<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関数にオブジェクトを渡しているので、私のパイプフィルターが正しく機能していません。これは基本的に、あなたはそれが最初のオプションだ場合、あなたが選択し、そのプロパティを設定することを言う。この

<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> 

を試してみて[ngValue]="department.id"とthis.Directory.categories[0].id;

Answer 1

あなたは[(ngModel)]="selectedDepartmentのように結合双方向データ」を持っている場合は、あなたも

selectedDepartment = 1;

コンポーネントTSファイルでこれを設定することができますし、それは私が含まれているその値に

Answer 2

を使用して固定しました。

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>