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

在课堂上声明一个字段并不会有问题。

但是，如果您不想触摸您的课程，则只能在模板中执行此操作：

<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">

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

Answer 2

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

以下是解决方案：

if (+num1 > +num2) {
  //...
};

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

2 个答案: