Angular 2 - ngSwitchCase - 正确的语法（包装器）

Question

我目前正在制作一个排行榜演示，其中玩家有很多游戏、积分和 points/games 的比率。在我的排行榜顶部，我想要一条线来显示下面的内容。

<h2>{{title}}</h2>
<ul class="leaderboard">
    <li>
        <span class="badge">Rank</span> Name
        <div class="wrapper"[ngSwitch]="type">
            <span *ngSwitchCase="'games'" class="points">Games</span>
            <span *ngSwitchCase="'points'" class="points">Points</span>
            <span *ngSwitchCase="'ratio'" class="points">Ratio</span>
            <div class="wrapper" *ngSwitchDefault>
                <span class="points">Ratio</span>
                <span class="points">Points</span>
                <span class="points">Games</span>
            </div>
        </div>
    </li>
</ul>

我认为带有 ngSwitchDefault 的第二个 div 是问题所在。但我对 Angular 2 及其与 html 的用法比较陌生。我该如何处理 html?

Answer 1

这是一个 switch 工作的 plunker，单引号没问题（我的坏）。

enter code here

https://plnkr.co/edit/1FWbbWiLX1EGsm6Pe9YA?p=preview

Angular 2 - ngSwitchCase - 正确的语法（包装器）

Angular 2 - ngSwitchCase - Correct Syntax (Wrapper)

html

wrapper

angular