在Angular 2的模板中声明变量答案

【问题标题】：Declare variable in template in Angular 2在Angular 2的模板中声明变量
【发布时间】：2016-08-01 19:02:55
【问题描述】：

我想让我的用户有机会选择使用哪种类型的输入来选择颜色：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 类的字段，还是应该在模板中以某种方式在本地声明它？如果正确答案是“在模板中”，该怎么做？

谢谢。

【问题讨论】：

标签： angular frontend

【解决方案1】：

在类中声明字段没有问题。

但是，如果你不想碰你的班级，你只能在模板中做：

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

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

Angular 在后台为你创建了一个colorInputTypeText。

colorInputTypeText 是一个布尔变量。默认情况下它是false，因此该复选框未选中。如果您希望默认值等于true，则必须添加checked 属性，如下所示：

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

我个人更喜欢这个解决方案，因为你的类不需要声明额外的属性，而且模板中的逻辑很容易理解。

【讨论】：

在这种情况下colorInputTypeText 的初始值是多少？我可以修改它吗？
这不是 100% 有效的。在我第一次选中/取消选中复选框之前，colorInputTypeText 是 undefined，因此它会被初始化并仅在第一次单击复选框后才起作用。
undefined 在 javascript 中是一个虚假值，因此未选中该复选框。如果您想使用 true 值进行初始化，您必须按照我所说的在输入字段中添加 checked 属性。
但在更改事件发生之前它不会设置为 true。无论如何，您激励我改进您的答案以使其发挥作用。看看吧。

【解决方案2】：

注意：这个答案的灵感来自@Bernardo Pacheco，所以请不要忘记为他的答案投票。

解决办法如下：

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

【讨论】：