Angular 2，設置默認值選擇選項

我嘗試添加一個默認值到一個選項。它將像一種佔位符，我使用this method來做到這一點。它在純HTML中起作用，但如果我嘗試使用角度2屬性的*ngFor，它不會選擇任何內容。Angular 2，設置默認值選擇選項

這裏我的代碼，我在純HTML使用：

<select name="select-html" id="select-html"> 
    <option value="0" selected disabled>Select Language</option> 
    <option value="1">HTML</option> 
    <option value="2">PHP</option> 
    <option value="3">Javascript</option> 
    </select>

而採用了棱角分明的模板：

<select name="select" id="select" [(ngModel)]="selectLanguage"> 
    <option *ngFor="let item of selectOption" 
     [selected]="item.value==0" 
     [disabled]="item.value==0">{{item.label}}</option> 
    </select>

類是

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

@Component({ 
    moduleId: module.id, 
    selector: 'app-form-select', 
    templateUrl: 'default.component.html' 
}) 
export class DefaultComponent { 
    private selectOption: any; 
    constructor() { 
    this.selectOption = [ 
     { 
     id: 1, 
     label: "Select Language", 
     value: 0 
     }, { 
     id: 2, 
     label: "HTML 5", 
     value: 1 
     }, { 
     id: 3, 
     label: "PHP", 
     value: 2 
     }, { 
     id: 4, 
     label: "Javascript", 
     value: 3 
     } 
    ] 
    } 
}

我想Select Language被選作一個默認值。它已禁用但未選中。

如何將其選爲默認值？

Live example

來源

2016-09-27 Radonirina Maminiaina

更新

4.0.0-beta.6加入compareWith

<select [compareWith]="compareFn" [(ngModel)]="selectedCountries"> 
    <option *ngFor="let country of countries" [ngValue]="country"> 
     {{country.name}} 
    </option> 
</select> 

compareFn(c1: Country, c2: Country): boolean { 
    return c1 && c2 ? c1.id === c2.id : c1 === c2; 
}

這種方式分配給selectedCountries實例並不需要是相同的對象，但是自定義比較功能可以通過，例如可以匹配差異具有相同屬性值的不同對象實例。

原

如果你想使用的價值，你需要在選項元素上使用[ngValue]的對象。

<select name="select" id="select" [(ngModel)]="selectLanguage"> 
    <option *ngFor="let item of selectOption" [ngValue]="item" 
     [disabled]="item.value==0">{{item.label}}</option> 
    </select>

當selectLanguage具有分配[(ngModel)]="..."將這個做一個默認選中的選項值：

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

@Component({ 
    moduleId: module.id, 
    selector: 'app-form-select', 
    templateUrl: 'default.component.html' 
}) 
export class DefaultComponent { 
    private selectOption: any; 
    constructor() { 
    this.selectOption = [ 
     { 
     id: 1, 
     label: "Select Language", 
     value: 0 
     }, { 
     id: 2, 
     label: "HTML 5", 
     value: 1 
     }, { 
     id: 3, 
     label: "PHP", 
     value: 2 
     }, { 
     id: 4, 
     label: "Javascript", 
     value: 3 
     } 
    ]; 
    this.selectLanguage = this.selectOption[0]; 
    } 
}

來源

2016-09-27 12:06:40

@CTN對不起，我不明白你的問題。什麼標籤和什麼HTML DOM？ –

我想設置html標籤來標籤值。 – CTN

嘗試下面的示例代碼如下：
替換yourValue與您要選擇的任何值默認

<select placeholder="country" > 
     <option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" > 
      {{country.country_name}} 
     </option> 
</select>

來源

2017-08-06 19:27:03

使用ngModel時不起作用 – Algis

我發現它更好，刪除默認選項從selectOption數組中分別指定默認的不可選項。

<select name="select" id="select" [(ngModel)]="selectLanguage"> 
    <option [ngValue]="undefined" disabled>Select Language</option> 
    <option 
     *ngFor="let item of selectOption" 
     [value]="item.value" 
    > 
    item.label 
    </option> 
</select>

來源

2017-12-27 22:52:38

爲什麼這不是公認的答案。另一個答案是超級錯綜複雜的。 –

Angular 2，設置默認值選擇選項

回答

相關問題