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

Question

我正在构建一个 angular 6 应用程序，我想将 select 的 show/hide 逻辑绑定到复选框 input。我不确定我的问题在哪里。我想我需要一个 observable，但我想知道是否有一种方法可以直接做到这一点（直接就像在我的打字稿代码中不使用变量一样）。

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

好的，我相当找到了。 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 属性.

Answer 3

这似乎可以满足您的要求（参见 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">

也就是说，绑定到组件 class 中定义的模型更符合 Angular 的处理方式：

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

export class HelloComponent {
  showSelect= false;
}

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

How do I bind a checkbox to a select disabled property using ngx data binding?

javascript

data-binding

web-component

angular

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

How do I bind a checkbox to a select disabled property using ngx data binding?

javascript

data-binding

web-component

angular

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