代码之家 › 专栏 › 技术社区 › Tomasz Golinski

ngSwitch在计算为true时不显示项

ng-switch angular

1

Tomasz Golinski · 技术社区 · 8 年前

我不知道我在这里做什么。我在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>

当我查看调试器时,可以看到第一个case.png被计算为true:

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

其余的被评估为错误。

但是,仅显示默认项。

汤姆

1 回复 | 直到 8 年前

1

2

ConnorsFan 8 年前

这个 ngSwitch 指令类似于 switch ngSwitchCase 值等于 下一代交换机 变量。下面是一个例子 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>

在您的例子中,一个表达式为每个 . 你最终得到的等价物是:

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

要使其工作,请在 下一代交换机

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