Question

如何使用* Ngif显示一个下拉菜单并隐藏另一个下拉菜单。使用复选框的输入。

因此，如果复选框为true，则显示此内容，否则显示该内容。

<div class="test">
    <div class="test1">
        <div class="test-header">
            test
        </div>
        <div class="test-block">
            <app-select
                (selectConnection)="onSelectConnection($event)"
                (selectPeriod)="onSelectPeriod($event)"
                (selectUtilityType)="onSelectUtilityType($event)"
                (selectTime)="onSelectTime($event)"
                [timeSelection]="true"
                [utilityTypeSelection]="true"
                [allowTimeToggle]="true"
                [allowAll]="true"
                [periodSelection]="true"
                [allowTableToggle]="false"
                [intervalSelection]="false"
                [parentIsLoading]="loading"
            ></app-select>
        </div>
    </div>
</div>

ToggleTime是复选框的布尔值

像这样

*Ngif="ToggleTime(is true)"

显示：

[timeSelection]="true" 
[periodSelection]="false"

其余。

如果不是

*Ngif="!ToggleTime"
[timeSelection]="false"
[periodSelection]="true"

其余。

Answer 1

您可以这样做：

[timeSelection]="ToggleTime? true:false" 
[periodSelection]="ToggleTime? false:true"

或更简单：

[timeSelection]="ToggleTime" 
[periodSelection]="!ToggleTime"

（使用第二种方法，但是第一种方法值得了解，以后会有用）

Answer 2

使用复选框直接绑定的值。假设是ToggleTime：

[timeSelection]="ToggleTime" 
[periodSelection]="!ToggleTime"

Answer 3

您可以这样做：

[timeSelection]="ToggleTime" 
[periodSelection]="!ToggleTime"

* NgIf用于显示下拉菜单

3 个答案: