Angular 2 - 選擇綁定

我想在<select>中選擇一個我在組件中定義的選項。但是當我想在控制檯中打印時，我得到了未定義的內容。我的代碼：Angular 2 - 選擇綁定

component.html：

<div class="row"> 
    <div class="form-group col-md-6"> 
     <label>Select option:</label> 
     <select class="form-control" [(ngModel)]="selectedOption"> 
      <option *ngFor="let item of options" [value]="item">{{ item.display }}</option> 
     </select> 
    </div> 
</div> 

<button type="button" (click)="showOption()">Show selected option</button>

component.ts：

selectedOption: any; 

sortOptions = [ 
    { 
     value: 'option1', 
     display: 'First option' 
    }, 
    { 
     value: 'option2', 
     display: 'Second option' 
    } 
]; 

showOption(): void { 
    console.log(this.selectedOption.value); 
}

當我嘗試打印console.log(this.selectedOption.value);我得到「未定義」當我嘗試打印的console.log（此.selectedOption）我得到「[option option]」

我不知道如何解碼它。

來源

2017-07-04 user

與[ngValue]嘗試，而不是[value]：

<select [(ngModel)]="selectedOption"> 
    <option value=""></option> 
    <option *ngFor="let item of options" [ngValue]="item"> 
    {{item.display}} 
    </option> 
</select>

來源

2017-07-04 21:14:28

它的工作，謝謝。 value和ngValue有什麼不同？ – user

沒有詳細解釋ngValue的文檔，但是如果你想在選項中使用對象，你必須通過'[ngValue]'爲其他情況下使用'[value]' –

而如果我使用ReactiveFormsModule的FormsModule - 所以我有'formControlName'而不是'ngModel' - 我該怎麼做才能讓Angular選擇'selectedOption'？現在我有'選項'數組和'selectedOption'是這個數組項中的一個......但是Angular並沒有將這個選項設置爲:( – artuska

您也可以使用此：

<select [(ngModel)]="selectedOption"> 
    <option value=""></option> 
    <option *ngFor="let item of sortOptions" [value]="item.id"> 
    {{item.display}} 
    </option> 
</select>

[值]字符串值和[ngValue]爲各類

來源

2017-07-04 21:33:38 willmaz

Angular 2 - 選擇綁定

回答

相關問題