Angular2 select with ngValue null

下面是我想要做的：我想要一個選擇列表綁定到ngValue的對象數組，但第一個選項需要是一個「無」選項與null值。Angular2 select with ngValue null

型號：

this.managers = [ 
    { id: null, name: "(None)" }, 
    { id: 1, name: "Jeffrey" }, 
    { id: 2, name: "Walter" }, 
    { id: 3, name: "Donnie" } 
    ]; 

this.employee = { 
    name: "Maude", 
    managerId: null 
};

查看：

<select [(ngModel)]="employee.managerId"> 
    <option *ngFor="#manager of managers" [ngValue]="manager.id">{{ manager.name }}</option> 
    </select>

上的負載，該列表正確綁定到「無」的元素。但是，如果您更改爲其他項目並返回，則現在模型值將切換爲0: null的字符串。這很不方便;這意味着在我嘗試將它保存到服務器之前，我必須截取該值並手動將其更改爲空值。

這裏有一個演示一個Plunker：http://plnkr.co/edit/BH96RWZmvbbO63ZAxgNX?p=preview

這是很容易在角1額外<option value="">None</option>

這似乎將是一個非常常見的情況做了，但我一直無法找到任何解決方案。我也嘗試添加一個<option [ngModel]="null">None</option>，但它會產生相同的0: null值。

有什麼建議嗎？

來源

2016-04-21 bensgroi

我想你應該創建一個bug報告。 –

對我來說，它確實看起來像一個錯誤，但我如果你正在尋找快速解決方案，你可以簡單地將null標識符轉換爲string。它應該解決問題，但你應該採取一些額外的措施來完成這項工作。

見例如Plnkr example

或者，如果你要做到這一點你從NG1提到的方式，你可以這樣做：Plnkr example

我知道這是不是最好的解決辦法，但希望將在NG團隊修復這個bug之前幫助你！

來源

2016-04-22 07:52:39 Mikki

我忘記了ngModelChange，它至少可以幫助我解決問題。謝謝！ – bensgroi

我有完全相同的問題，但是如果使用類作爲模型，則您的解決方法不起作用。你已經爲你的屬性指定了數據類型，編譯器不允許你編譯比較一個int和一個字符串的代碼..所以我最好希望他們儘快修復這個問題.. –

只需查看Angular2的更新日誌，在[2.2.1]（https://github.com/angular/angular/blob/master/CHANGELOG.md#bug-fixes-1）中修復了 –

不是字符串「空」的我創建了一個空白的對象進行比較在我的打字稿稍後。

在組件：

blankObject = { 
    toString() { 
     return 'blank object'; 
    } 
}; 

isBlank() { 
    return this.filter.searchValue == null || this.filter.searchValue === this.blankObject; 
}

模板：

<select [(ngModel)]="filter.searchValue"> 
    <option [ngValue]="blankObject"></option> 
    <option *ngFor="let item of filter.selectOptions" [ngValue]="item.value"> 
       {{item.label}} 
    </option> 
</select>`

來源

2016-08-23 17:49:13

我將您重定向到TabascoMustang的reddit的答案，我實現了自己的解決方案而努力宏偉：

TabascoMustang's reddit answer

這應該工作（更新當前NG2 RC）：

<select [ngModel]="audit.managerId || ''" (ngModelChange)="audit.managerId = $event"> 
    <option value="">Please Select</option> 
    <option *ngFor="let contact of audit.contacts">{{ contact.name }} 
    </option> 
</select>

來源

2016-10-13 19:23:01

變化[ngValue]剛剛[值]

來源

2016-11-11 20:02:13 DSoa

截至目前沒有此一open issue in the github repository。

作爲一項解決方案，我發現添加ngModelChange是在視圖中將值設置爲null而不必向組件添加任何內容的最簡單方法。

查看：

<select [(ngModel)]="employee.managerId" 
     (ngModelChange)="employee.managerId = $event ? $event : null"> 
    <option *ngFor="#manager of managers" [value]="manager.id">{{ manager.name }}</option> 
</select>

注意，ngValue現在value

來源

2017-01-08 11:04:21 Igor

Angular2 select with ngValue null

回答

相關問題