サービスから選択ボックスでデフォルト値を選択

Question

私はクラスを持っていて、クラスに注入されたフィルターサービスと呼ばれるサービスを持っています。私はこのサービスを使用して選択ボックスを作成し、すべてのオプションを一覧表示しています。 ngOnInitメソッドを呼び出して、 filter.getAccountTypes（）メソッドを呼び出して、サービスにドロップダウンを設定するデータがあるようにします。 filter.AccountTypesは私が最初の行としてngModelのデフォルト値を設定することができませんサービスの内部に装填されているので、私は、次のコード

<select class="form-control" [ngModel]="accountType"> 
     <option *ngFor="#typ of filter.AccountTypes;#i = index" selected="selected" [value]="typ.Id">{{typ.Name}}</option> 
     </select> 

を有する鑑み

export class ActionsAddComponent { 
    constructor(public filter: FilterCollection, public _form: FormBuilder) { 
    this.actionForm = this._form.group({ 
      AccountId: ['', Validators.required], 
      Type: ['', Validators.required] 
      }); 
    } 

    ngOnInit() { 
    this.filter.getAccountTypes(); 
    } 

。このための簡単な修正はありますか？私は最初の行を選択することができるように、まだngmodelを持っています。

export class FilterCollection { 
public AccountTypes; 
getAccountTypes() { 
     this.orgId = this._localstore.get('orgId'); 
     this._http.get('Organisations/' + this.orgId + '/AccountTypes') 
      .map(res => res.json()) 
      .subscribe(res => { 
       this.AccountTypes = []; 
       for (var x of res.Data) 
        this.AccountTypes.push(new AccountTypesModel(x)); 
      }); 
    } 
} 

Answer 1

これはうまくいくかもしれない：

<option *ngFor="let typ of filter.AccountTypes;let i = index; let first=first" [attr.selected]="first ? 'selected' : null" [value]="typ.Id">{{typ.Name}}</option> 

export class FilterCollection { 
public AccountTypes; 
getAccountTypes() { 
     this.orgId = this._localstore.get('orgId'); 
     this._http.get('Organisations/' + this.orgId + '/AccountTypes') 
      .map(res => res.json()) 
      .map(res => { 
       this.AccountTypes = []; 
       for (var x of res.Data) 
        this.AccountTypes.push(new AccountTypesModel(x)); 
      }); 
    } 
} 

export class ActionsAddComponent { 
    constructor(public filter: FilterCollection, public _form: FormBuilder) { 
    this.actionForm = this._form.group({ 
      AccountId: ['', Validators.required], 
      Type: ['', Validators.required] 
      }); 
    } 

    ngOnInit() { 
    this.filter.getAccountTypes().toPromise().then(val => this.accountType = this.filter.AccountTypes[0] ; 
    } 
} 

Answer 2

あなたはselected属性の値を設定するために、ループ内の要素のインデックスを活用することができます。 optionタグからselected属性を削除する最初の要素でない場合は、nullを設定しないでください。

<select class="form-control" [ngModel]="accountType"> 
    <option *ngFor="#typ of filter.AccountTypes;#i = index" 
    [selected]="i===1 ? 'selected': null" 
    [value]="typ.Id">{{typ.Name}}</option> 
</select> 

このplunkrを参照してください：https://plnkr.co/edit/9AzoSzWU0DTFa5chF2SR?p=preview