Javascript 如何使用ngx数据绑定将复选框绑定到选定禁用属性？

我正在构建angular 6应用程序，我想将

select

的显示/隐藏逻辑绑定到复选框

input

。我不确定我的问题在哪里。我想我需要一个可观察的，但我想知道是否有一种方法可以直接做到这一点（就像在我的typescript代码中不使用变量一样）

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“你好”，
模板：`ere


{{bl.checked}


全部的
其他的
`,
样式：[]
})
导出类HelloComponent{
}

你可以在网上找到一本书

与ngx有关，但与ngx有关

在我的wpf时代，这是数据绑定的一种常见用法：）

可能有点过头了

export class HelloComponent {
    public flag = false;
}

如果您在组件中定义了这个变量，那么在模板中您就可以这样做

<select *ngIf="flag">

可能有点过头了

export class HelloComponent {
    public flag = false;
}

如果您在组件中定义了这个变量，那么在模板中您就可以这样做

<select *ngIf="flag">

好的，我找到了

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“你好”，
模板：`Show select
（{{this.flag}}）
全部的
其他的
`,
样式：[]
})
导出类HelloComponent{
}

顺便问一下，如果您想知道

ngIf*

和

[隐藏]

之间的区别是什么。当表达式为falsy时：

• *ngIf

  从DOM中删除元素

• [隐藏]

  对用户隐藏元素

编辑：正如@ConnorsFan所说，这与@windmaomao和他自己讨论的解决方案完全相同

此.flag

将创建

flag

属性。

好的，我找到它了：

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“你好”，
模板：`Show select
（{{this.flag}}）
全部的
其他的
`,
样式：[]
})
导出类HelloComponent{
}

顺便问一下，如果您想知道

ngIf*

和

[隐藏]

之间的区别是什么。当表达式为falsy时：

• *ngIf

  从DOM中删除元素

• [隐藏]

  对用户隐藏元素

---

编辑：正如@ConnorsFan所说，这与@windmaomao和他自己讨论的解决方案完全相同

this.flag

将创建

flag

属性。

这似乎是要执行的操作（请参阅）：

---

也就是说，绑定到component类中定义的模型更符合角度操作方式：

<input type="checkbox" [(ngModel)]="showSelect">
<select class="select" [hidden]="!showSelect">

---

这似乎可以执行您想要的操作（请参阅）：

---

也就是说，绑定到component类中定义的模型更符合角度操作方式：

<input type="checkbox" [(ngModel)]="showSelect">
<select class="select" [hidden]="!showSelect">

---

你能分享一个演示吗？我只是试了一下，但没用。也许我遗漏了什么。@windmaomao-你应该在checkbox元素中添加

[（ngModel）]=“flag”

。@ConnorsFan也不起作用。你能分享一个工作演示吗？@windmaomao-是的，但是

标志如何修改？@windmaomao-他想根据复选框的状态显示/隐藏
选择
元素。这就是为什么我建议将
标志
绑定到复选框。你能分享一个演示吗？我只是试了一下，但没用。也许我遗漏了什么。@windmaomao-你应该在checkbox元素中添加
[（ngModel）]=“flag”
。@ConnorsFan也不起作用。你能分享一个工作演示吗？@windmaomao-是的，但是
标志如何修改？@windmaomao-他想根据复选框的状态显示/隐藏
选择
元素。这就是我建议将
标志
绑定到复选框的原因。请参阅。@ConnorsFan它正在工作，但不是直接工作。我们依赖于一个外部变量。可以直接绑定吗？我不这么认为。正如您在stackblitz中看到的，在没有角度数据绑定或事件绑定的情况下，不会执行更改检测。请参阅。@ConnorsFan它正在工作，但不会直接执行。我们依赖于一个外部变量。可以直接绑定吗？我不这么认为。正如您在stackblitz中所看到的，在没有角度数据绑定或事件绑定的情况下不会执行更改检测。您的代码实际上在组件类中创建了一个未声明的
checked
标志。您可以通过删除my code中的
标志
声明来查看它；代码仍然可以使用
[（ngModel）]=“flag”
。换句话说，代码中的
this.checked
不是指checkbox元素的
checked
属性，而是指组件类的属性。这与我在中介绍的解决方案相同。您的代码实际上在组件类中创建了一个未声明的
checked
标志。您可以通过删除my code中的
标志
声明来查看它；代码仍然可以使用
[（ngModel）]=“flag”
。换句话说，代码中的
this.checked
不是指checkbox元素的
checked
属性，而是指组件类的属性。很好！知道了！（是的，我在工作中使用反应式或模板形式）很好！知道了！（是的，我在工作中使用被动或模板形式）
<input type="checkbox" [(ngModel)]="showSelect">
<select class="select" [hidden]="!showSelect">

export class HelloComponent {
  showSelect= false;
}