时间戳

首页 > 解决方案 > Bootstrap 4 药丸在 Angular6 中无法正常工作

angular - Bootstrap 4 药丸在 Angular6 中无法正常工作

问题描述

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

我想要导航栏，但引导程序没有按预期工作，我在下面的链接中得到了像图像一样的输出 它应该是蓝色背景

标签： angularbootstrap-4

解决方案

试试这样：

演示

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

推荐阅读