正确的 ngSwitchCase 不会让段落出现

Question

我有一个按钮，可以将数组中的两个字符串之一分配给变量。

然后，使用 [ngSwitch] 我只想显示一个段落。

None 的段落似乎出现了，我只是在每次单击按钮时收到随机警报。

哦，组件是在主组件上调用的。

animations.component.html

<button (click)="chooseAnimation()">button</button>

<div [ngSwitch]="animation">
    <div *ngSwitchCase="splittingImage">
       <p> splitting </p>  
    </div>

    <div *ngSwitchCase="zoomAndBlur">
        <p> zooming </p> 
   </div>
</div>

animations.component.ts

export class AnimationsComponent implements OnInit {

animation;
animations = ['zoomAndBlur','splittingImage'];

ngOnInit(){
 }

chooseAnimation(){
    this.animation = this.animations[Math.floor(Math.random() * this.animations.length)];
    alert(this.animation); //this works fine and alerts zoomAndBlur or splittingImage. 
}

constructor() {

}

Answer 1

尝试将 *switchCase 值用单引号引起来。

<div *ngSwitchCase="'splittingImage'"> 和 <div *ngSwitchCase="'zoomAndBlur'">

正确的 ngSwitchCase 不会让段落出现

correct ngSwitchCase doesn't make paragraph appear

ng-switch

angular