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

Question

我正在构建一个 Angular 6 应用程序，我想将 select 的显示/隐藏逻辑绑定(bind)到复选框input。我不确定我的问题出在哪里。我想我需要一个可观察的，但我想知道是否有一种方法可以直接完成它(直接就像在我的 typescript 代码中不使用变量一样)。

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 时代数据绑定(bind)的常见用法:)

Answer 1

这似乎可以满足您的要求(请参阅 this stackblitz ):

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

它还可以与添加到输入元素的临时属性一起使用(例如 showSelect)。只要在复选框上设置数据绑定(bind)， View 就会更新(请参阅 this stackblitz )。

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

<小时/>

话虽这么说，绑定(bind)到组件类中定义的模型更符合 Angular 的处理方式:

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

export class HelloComponent {
  showSelect= false;
}