选中/取消选中 Angular 4 中的复选框后需要显示/隐藏下拉列表答案

【问题标题】：Need to show/hide a dropdown after checking/unchecking a checkbox in angular 4选中/取消选中 Angular 4 中的复选框后需要显示/隐藏下拉列表
【发布时间】：2017-11-16 19:07:16
【问题描述】：

我在 Angular4 中有一个特定的要求。选择/选中复选框后，我需要显示一个下拉菜单，如果我取消选中该复选框，则下拉菜单将隐藏。下面是复选框的代码。

    <div *ngIf="item.showOperationField">
        <p-checkbox
            value ="inflationaryImpactCheck"
            label="Save for Inflationary Impact"
            name = "calculationSaveInflation"
            [(ngModel)]="item.inflationaryImpact"
            pTooltip="Check the Inflationary Impact box to map this calculation to an index for Inflationary Pressure calculation.">
        </p-checkbox>
    </div>

点击/取消点击复选框后

    <div *ngIf="item.showOperationField">
        <p-dropdown
            [style]="{'width':'200px'}"
            [options]="inflation"
            name = "calculationInflation"
            [(ngModel)]="item.selectedInflation">
        </p-dropdown>
    </div>

请帮助我，让我知道该怎么做

【问题讨论】：

标签： angular checkbox

【解决方案1】：

您应该检查是否选中了复选框，并取决于将下拉菜单的 ngIf 值设置为 true 还是 false。检查复选框是否被选中： check checkbox

在更改事件中，您应该设置 ngIf 的值。我希望你能理解:)。

【讨论】：

【解决方案2】：

我可以看到您正在使用 PrimeNG。

在p-checkbox 标签中启用二进制选项binary="true"。

来自doc：

也可以通过启用二进制选项使用 ngModel 属性绑定单个布尔值。

如果item.inflationaryImpact 为真，那么您只需显示您的p-dropdown：

<div *ngIf="item.showOperationField">
  <p-checkbox binary="true" value="inflationaryImpactCheck" label="Save for Inflationary Impact" name="calculationSaveInflation" [(ngModel)]="item.inflationaryImpact" pTooltip="Check the Inflationary Impact box to map this calculation to an index for Inflationary Pressure calculation.">
  </p-checkbox>
</div>

<p-dropdown *ngIf="item.inflationaryImpact" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

如果item.inflationaryImpact 为假，则不会显示下拉菜单。

Demo

【讨论】：

【解决方案3】：

您可以在复选框元素上添加单击事件，如果选中，则将“显示下拉菜单”设置为 true：

    <p-checkbox
        value ="inflationaryImpactCheck"
        label="Save for Inflationary Impact"
        name = "calculationSaveInflation"
        [(ngModel)]="item.inflationaryImpact"
        (change)="showHideDropDown($event)" /* add this */
        pTooltip="Check the Inflationary Impact box to map this calculation to an index for Inflationary Pressure calculation.">
    </p-checkbox>

在你的 component.ts 中

showHideDropDown(event){
 if(event.target.checked){
  this.showDropDown = true;
} else {
   this.showDropDown = false;
}

在您的视图中，您根据此变量显示隐藏

<div *ngIf="item.showOperationField && showDropDown ">
    <p-dropdown
        [style]="{'width':'200px'}"
        [options]="inflation"
        name = "calculationInflation"
        [(ngModel)]="item.selectedInflation">
    </p-dropdown>
</div>

【讨论】：

感谢您的回复先生。我添加了 showDropDown: boolean;在 component.ts 中，因为未找到 showDropDown 导致编译失败。现在编译好了。但是在选中/取消选中这两种情况时，它会转到其他部分。你能帮我进一步吗？
请试试这个：(change)="showHideDropDown($event)" 而不是 (click)
试过了。但没有运气。这一次什么都没有发生。不在 if 块或 else 块中。
(click)="showHideDropDown($event)" 并在您的组件中使用：event.checked 而不是 event.target.checked
好的，我会检查并告诉你