は、オプションのコレクションは、私がangular2を使用しています

Question

を変更したときに結合を選択し、HTMLは次のように選択する必要がありangular2：ます。myList = [「オプション1」、「オプション2」、「オプション3」]

を聞かせて

<select class="form-control" id="myList" [(ngModel)]="mySelectedItem"> 
    <option value="">{{ "ALL" }}</option> 
    <option *ngFor="let item of allItems" [value]="item">{{item}}</option> 
</select> 

例を期すために

allItemsコレクションが変更されるまで、これはすべて正常に動作します。ユーザが最初にページを提示されると、彼らは彼らの優先オプションとして「option1」を選択する。今、javascriptはallItemsコレクションを変更し、 "option1"を有効なオプションとして削除します。その時点で、選択は何も表示しません。

Selectの値がAllItemsコレクションの既知の値でない場合、Selectに最初のオプション "ALL"が表示されます。

myListコレクションの値は、JavaScriptの他のロジックに基づいて自動的に変更されます。

誰かがこれを達成する方法をアドバイスできますか？

Answer 1

allItemsの変更は、あなたのJavaスクリプトコードでallにmySelectedItemを設定どこあなたは

、以下

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<h3 class="title">Basic Angular 2</h3> 
    <hr /> 
    <select class="form-control" id="myList" [(ngModel)]="mySelectedItem"> 
    <option value="all">{{ "ALL" }}</option> 
    <option *ngFor="let item of allItems" [value]="item">{{item}}</option> 
    </select> 
    <button (click)="updateLIst()" >Update</button> 
    ` 
}) 
export class AppComponent { 
    mySelectedItem= 'all' 
    allItems = ["option1", "option2", "option3"]; 
    constructor(){} 

    updateLIst(){ 
    this.allItems = [ "option2", "option3"]; 
    this.mySelectedItem = 'all'; 
    } 
} 

をしようとします。ここで

はPlunker!!

は、この情報がお役に立てば幸いです！