ngSwitch 在评估为 true 时不显示项目答案

【问题标题】：ngSwitch not showing item when evaluated to truengSwitch 在评估为 true 时不显示项目
【发布时间】：2019-01-23 23:51:51
【问题描述】：

我不确定我在这里做什么。我在 ngFor 中有这个 ngSwitch

          <li class="b-inBoxItem" *ngFor="let item of uploader.queue">
                <div [ngSwitch]="item.file.name">
                    <span *ngSwitchCase="item.file.name.includes('.png')" class="ic ic-file-image"></span>
                    <span *ngSwitchCase="item.file.name.includes('.jpeg')" class="ic ic-file-image"></span>
                    <span *ngSwitchCase="item.file.name.includes('.doc')" class="ic ic-file-stats"></span>
                        .
                        .
                        .
                    <span *ngSwitchDefault class="ic ic-file-empty"></span>
                </div>
          </li>

当我查看调试器时，我可以看到第一个案例 .png 被评估为 true：

<!--bindings={
    "ng-reflect-ng-switch-case": "true"
}-->

其余的被评估为假。

但是，仅显示默认项。

我在这里做错了什么？

汤姆

【问题讨论】：

标签： angular ng-switch

【解决方案1】：

ngSwitch 指令类似于switch 语句。它显示ngSwitchCase 值等于ngSwitch 变量的元素。这是取自this Rangle.io article的示例：

<div [ngSwitch]="tab">
  <app-tab-content *ngSwitchCase="1">Tab content 1</app-tab-content>
  <app-tab-content *ngSwitchCase="2">Tab content 2</app-tab-content>
  <app-tab-content *ngSwitchCase="3">Tab content 3</app-tab-content>
  <app-tab-content *ngSwitchDefault>Select a tab</app-tab-content>
</div>

在您的情况下，表达式为每个 ngSwitchCase 提供一个布尔值。你最终得到的结果是：

<li class="b-inBoxItem" *ngFor="let item of uploader.queue">
  <div [ngSwitch]="item.file.name">
    <span *ngSwitchCase="true" class="ic ic-file-image"></span>
    <span *ngSwitchCase="false" class="ic ic-file-image"></span>
    <span *ngSwitchCase="false" class="ic ic-file-stats"></span>
      .
      .
      .
    <span *ngSwitchDefault class="ic ic-file-empty"></span>
  </div>
</li>

显示默认的span，因为item.file.name 不等于true 或false。

要使其正常工作，请在 ngSwitch 中指定文件扩展名并测试可能的值：

<li class="b-inBoxItem" *ngFor="let item of uploader.queue">
  <div [ngSwitch]="getFileExtension(item.file.name)">
    <span *ngSwitchCase="'png'" class="ic ic-file-image"></span>
    <span *ngSwitchCase="'jpeg'" class="ic ic-file-image"></span>
    <span *ngSwitchCase="'doc'" class="ic ic-file-stats"></span>
      .
      .
      .
    <span *ngSwitchDefault class="ic ic-file-empty"></span>
  </div>
</li>

用方法（见this post）：

getFileExtension(filename: string): string {
  return filename.split('.').pop();
}

另一种解决方案是使用ngIf：

<li class="b-inBoxItem" *ngFor="let item of uploader.queue">
  <div>
    <span *ngIf="item.file.name.includes('.png')" class="ic ic-file-image"></span>
    <span *ngIf="item.file.name.includes('.jpeg')" class="ic ic-file-image"></span>
    <span *ngIf="item.file.name.includes('.doc')" class="ic ic-file-stats"></span>
      .
      .
      .
    <span *ngIf="!item.file.name.includes('.png') && !item.file.name.includes('.jpeg') && !item.file.name.includes('.doc')" class="ic ic-file-empty"></span>
  </div>
</li>

【讨论】：