Question

我想在我的代码中实现ngSwitch，如下所示：

<div [ngSwitch]="accessLevel">
    <div class="customer" *ngSwitchCase="ENABLED">
        This is customer data
    </div>
    <div  *ngSwitchDefault> 
        this is default
    </div>
    <div class="customer-blurr" *ngSwitchCase="DISABLED"> 
        This is disabled Customer Data
    </div>
</div>

在我的情况下accessLevel未定义，我期待this is default，但它显示：

This is customer data.

This is disabled Customer Data.

当我从the official docs读取时，如果没有匹配则应该转到默认情况。我错过了什么吗？

Answer 1

更改您的HTML，如下所示：

<div [ngSwitch]="accessLevel">
    <div class="customer" *ngSwitchCase="'ENABLED'">
      This is customer data
    </div>
    <div  *ngSwitchDefault> 
      this is default
    </div>
    <div class="customer-blurr" *ngSwitchCase="'DISABLED'"> 
      This is disabled Customer Data
    </div>
</div>

Answer 2

请注意，*ngSwitchCase指令的值必须是表达式才能匹配，而不是值。在您的情况下，您可能想要与字符串'ENABLED'进行比较，而不是与具有该名称的某个字段进行比较，因此它应该是例如：

<div class="customer" *ngSwitchCase="'ENABLED'">
                                <!-- ^ note quotes -->

您同时看到了ENABLED和DISABLED个案例，因为这些名称都没有定义，因此您实际上正在匹配评估真实性的undefined == undefined。因此，未显示默认值，但其他情况的两个都是。

或者，您可以定义一些常量或枚举以进行比较，而不是传递字符串，这将改善代码的语义。

ngSwitch默认情况下没有执行

2 个答案: