Question

我不确定我在这里做什么。我在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"
}-->

其余的都被评估为false。

但是，仅显示默认项。

我在这里做什么错了？

汤姆

Answer 1

///Some other VC let slideInMenuLauncher = SlideInMenuLauncher(withContentArray: [content]) slideInMenuLauncher.showMenu()指令类似于ngSwitch语句。它显示其switch值等于ngSwitchCase变量的元素。以下是取自this Rangle.io article的示例：

ngSwitch

在您的情况下，表达式为每个<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

使用方法（请参见this post）：

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

另一种解决方案是使用getFileExtension(filename: string): string { return filename.split('.').pop(); }：

ngIf

评估为true时ngSwitch不显示项目

1 个答案: