ngb-alert 仅适用于 type="success" 或无类型

Suj*_*joy 5 ng-bootstrap

我有以下有效的代码。

<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide"  (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="success" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
Run Code Online (Sandbox Code Playgroud)

但是,如果我更改为以下内容,则不会

<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide" type="danger" (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="primary" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
Run Code Online (Sandbox Code Playgroud)

我的 package.json 是这样的。

 "dependencies": {
    "@angular/animations": "^4.3.4",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.4",
    "@angular/core": "^4.3.4",
    "@angular/forms": "^4.3.4",
    "@angular/http": "^4.3.4",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.4",
    "@angular/platform-browser-dynamic": "^4.3.4",
    "@angular/router": "^4.3.4",
    "@ng-bootstrap/ng-bootstrap": "~1.0.0-alpha.30",
    "angular-loader": "^1.6.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "primeng": "^4.1.3",
    "rxjs": "^5.4.2",
    "screenshot-desktop": "^1.1.0",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.16"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.7",
    "@angular/compiler": "^4.3.4",
    "@angular/compiler-cli": "^4.3.4",
    "@types/jasmine": "^2.5.53",
    "@types/node": "^8.0.19",
    "codelyzer": "^3.1.2",
    "jasmine-core": "^2.7.0",
    "jasmine-spec-reporter": "^4.1.1",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.5.0",
    "typescript": "^2.4.2"
  }
Run Code Online (Sandbox Code Playgroud)

那么,请有专家告诉我这里有什么问题吗?为什么输入主要或危险将不起作用。

小智 6

我遇到了类似的问题。我的问题是 Angular 认为我正在传递一个变量,从中读取类型。显然没有变量 titledprimary所以它失败了。改变事情以[type]="'primary'"完全解决问题。

<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" [type]="'primary'" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
Run Code Online (Sandbox Code Playgroud)

  • 天哪,这让我发疯了!非常感谢! (2认同)

bvd*_*vdb 0

我认为你只是不被允许使用这里的fade课程

class="fade animate-show animate-hide"
Run Code Online (Sandbox Code Playgroud)

如果我运行你的代码,它只会告诉我成功。但如果我删除该类fade,它会显示两条消息。

编辑

我将你的依赖项列表与我的进行了比较。

您是否尝试过更新您的库?
您可以从命令行运行它:

npm update -D && npm update -S
Run Code Online (Sandbox Code Playgroud)

你有但我没有的依赖关系:

"angular-loader": "^1.6.5",
"font-awesome": "^4.7.0",
"primeng": "^4.1.3",
"screenshot-desktop": "^1.1.0",
"underscore": "^1.8.3"
Run Code Online (Sandbox Code Playgroud)

我特别想知道第一个angular-loader。你知道它是用来做什么的吗?根据其文档,它是 Angular JS依赖项。