Question

<ul class="nav nav-pills">
    <li [class.active]="viewMode=='map'" class="nav-item"><a (click)="viewMode='map'" class="nav-link">Map View</a></li>
    <li [class.active]="viewMode=='list'" class="nav-item"><a (click)="viewMode='list'" class="nav-link">List View</a></li>
</ul>
<div [ngSwitch]="viewMode">
    <div *ngSwitchCase="'map'">Map View Content</div>
    <div *ngSwitchCase="'list'">List View Content</div>
    <div *ngSwitchDefault>Otherwise</div>
</div>

我想拥有导航栏，但引导程序无法按预期工作，我在以下链接中变得不喜欢图像 It should be with blue background

Answer 1

尝试这样：

DEMO

<ul class="nav nav-pills">
    <li class="nav-item">
        <a [class.active]="viewMode=='map'" (click)="viewMode='map'" class="nav-link">Map View</a>
    </li>
    <li class="nav-item">
        <a [class.active]="viewMode=='list'" (click)="viewMode='list'" class="nav-link">List View</a>
    </li>
</ul>

<div [ngSwitch]="viewMode">
    <div *ngSwitchCase="'map'">Map View Content</div>
    <div *ngSwitchCase="'list'">List View Content</div>
    <div *ngSwitchDefault>Otherwise</div>
</div>

Bootstrap 4药片在Angular6中无法正常工作

1 个答案: