我正在构建一个 angular 6 应用程序，我想将 a 的显示/隐藏逻辑绑定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。
与如何使用角度数据绑定将复选框绑定到选择禁用的属性相关？但是用 ngx。
在我的 wpf 时代，这是数据绑定的常见用法:)
这似乎可以满足您的要求（请参阅此 stackblitz）：
<input #bb type="checkbox" [(ngModel)]="bb.checked">
<select class="select" [hidden]="!bb.checked">
它还可以与添加到输入元素（例如showSelect）的特别属性一起使用。只要在复选框上设置了数据绑定，视图就会更新（请参阅此 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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句