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

Question

我正在构建一个 Angular 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  {
}

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

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

在我的 wpf 时代，这是数据绑定的常见用途 :)

Answer 1

这似乎做你想做的事（见this stackblitz）：

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

它也适用于添加到输入元素的临时属性（例如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 2

可能有点过头了，

export class HelloComponent {
    public flag = false;
}

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

<select *ngIf="flag">

Answer 3

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

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* 和[hidden] 之间的区别是什么。当表达式为假时：

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

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