在Angular 2中聲明模板中的變量

Question

我想讓我的用戶有機會選擇使用哪種類型的輸入來選擇顏色：type='text'或type='color'。所以，我寫這個模板：

<input [type]="colorInputTypeText ? 'text' : 'color'"> 
<input type="checkbox" [(ngModel)]="colorInputTypeText" name="colorInputTypeText"> 

而且在my-component.ts：

@Component({ 
    ... 
}) 
export class MyComponent { 
    colorInputTypeText = true; 
    ... 
} 

我的問題是：是還好吧聲明colorInputTypeText爲MyComponent類的字段，或者我應該以某種方式將它聲明本地模板？如果正確的答案是「在模板中」，該怎麼做？

謝謝。

Answer 1

注意：這個答案是受@Bernardo Pacheco啓發的，所以請不要忘記提高他的答案。

這裏是解決方案：

<input [type]="cb.checked ? 'color' : 'text'" id="color" name="color"> 
<input type="checkbox" name="inputTypeColor" checked #cb [(ngModel)]="cb.checked"> 

Answer 2

像你這樣在類中聲明一個字段沒有問題。

但是，如果你不想碰你的類，你可以做到這一點只在模板：

<input [type]="colorInputTypeText ? 'text' : 'color'"> 

<input type="checkbox" name="colorInputTypeText" #cb (change)="colorInputTypeText = cb.checked"> 

角引擎蓋下爲您創建一個colorInputTypeText。

colorInputTypeText是一個布爾變量。默認情況下它是false，所以複選框未被選中。如果你想默認值等於true，你必須添加checked屬性是這樣的：

<input type="checkbox" name="colorInputTypeText" checked #cb (change)="colorInputTypeText = cb.checked"> 

個人而言，我更喜歡這種解決方案，因爲你的類不需要模板是宣佈額外的屬性和邏輯容易明白。