Question

我正在构建一个角度为6的应用，我想将select的显示/隐藏逻辑绑定到复选框input。我不确定我的问题在哪里。我想我需要一个可观察的，但我想知道是否有一种方法可以直接进行（直接在我的打字稿代码中不使用变量）。

import { Component, Input } from '@angular/core';

@Component({
    selector: 'hello',
    template: `<label><input #bl id="checkBox" type="checkbox"> ere</label>
      <br/>
      <span>{{bl.checked}}</span>
      <br/>
      <select id="bl_select" class="select" *ngIf="(bl.checked)">
        <option value="0">All</option>
        <option value="1">Else</option>
      </select>`,
  styles: []
})
export class HelloComponent  {
}

您可以在MCVE上找到stackblitz.com。

与How do I bind a checkbox to a select disabled property using angular data binding?相关但与ngx相关。

这在我的wpf日子里经常使用数据绑定：）

Answer 1

可能过度做了一点，

export class HelloComponent {
    public flag = false;
}

如果您在组件中定义了此变量，那么您可以在模板中执行

<select *ngIf="flag">

Answer 2

这似乎可以做你想要的（见this stackblitz）：

<input #bb type="checkbox" [(ngModel)]="bb.checked">
<select class="select" [hidden]="!bb.checked">

它也适用于添加到输入元素的ad hoc属性（例如showSelect）。只要在复选框中设置了数据绑定，视图就会更新（请参阅this stackblitz）。

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

话虽如此，绑定到组件类中定义的模型更符合Angular的做事方式：

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

export class HelloComponent {
  showSelect= false;
}

Answer 3

好的，我相当找到了它。 Demo on stackblitz：

fcntl(i, F_GETFD)

顺便说一下，如果您想知道for(int i = range1; i <= range2; i++){ boolean isDivisible = true; for (String value : String.valueOf(i).split("")) { if (Integer.valueOf(value) % 3 != 0) { isDivisible = false; break; } } if (isDivisible) System.out.println("Is divisible: " + i); }和import { Component, Input } from '@angular/core'; @Component({ selector: 'hello', template: `<label><input #bb type="checkbox" [(ngModel)]="this.flag">Show select</label> <span>({{this.flag}})</span> <select class="select" [hidden]="!this.flag"> <option value="0">All</option> <option value="1">Else</option> </select>`, styles: [] }) export class HelloComponent { }之间有什么区别。当表达式为假时：

ngIf*从DOM中删除元素。
[hidden]隐藏用户的元素。

编辑：正如@ConnorsFan所说，这与@windmaomao和他自己讨论的解决方案完全相同。 *ngIf将创建[hidden]属性。

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

3 个答案: