Question

我在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>

请帮助我，让我知道如何做到这一点

Answer 1

您应该检查是否选中了复选框，并根据该设置将下拉列表的ngIf值设置为true或false。要检查复选框是否已选中： check checkbox

在更改事件中，您应设置ngIf的值。我希望你明白:)。

Answer 2

您可以在复选框元素上添加点击事件，如果选中，则检查您的组件，将“show dropdown”设置为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>

Answer 3

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

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

来自doc：

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

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

<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为false，则不会显示下拉列表。

Demo

在选中/取消选中角度4中的复选框后，需要显示/隐藏下拉列表

3 个答案: