标签: ng-bootstrap

我在这些版本中使用angular 5和ng-bootstrap:

  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.1.0",
    "angular-in-memory-web-api": "^0.5.4",
    "angular2-moment": "^1.9.0",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "date-util": "^1.2.1",
    "material-icons": "^0.2.1",
    "ngx-bootstrap": "^3.0.0",
    "normalize.css": "^8.0.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

当我得到服务有这个错误:

**

编译失败.

node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts(58,96):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts(121,67):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(115,208):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(12,45):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(29,45):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(37,44):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/modal/modal-window.d.ts(13,40):错误TS2315:类型'ElementRef'不是通用的.

我在我的Angular 2 webapp中使用了反应形式,我遇到了将日期分配给ngbDatepicker(ngbootstrap 1 alpha 6)的麻烦.我的对象有一个日期对象,例如:

var myObject = {date: new Date(1, 9, 2016)};

在我的反应形式中,它配置如下:

input.form-control(name='date', ngbDatepicker, #date="ngbDatepicker", placeholder='jj.mm.aaaa', formControlName='date', type="text")

我修补这样的形式:

this.form.patchValue({myObject: myObject});

问题是ngbDatepicker采用以下结构的日期:

{day: DD, month: MM, year: YYYY}

我找到了一个解决方法:

this.form.controls.myObject.controls.date.valueChanges
        .map((value) => {
            if(value) {
                if (typeof value.getMonth === 'function') {
                    this.form.controls.myObject.patchValue({
                        date: {
                            day: value.getUTCDay(),
                            month: value.getUTCMonth(),
                            year: value.getUTCFullYear()
                        }
                    });
                }
            }
            return value;
        })
        .subscribe((value) => {

        });

一切都按预期工作(每当表单被修补时日期都会更新)但是它太冗长(18行代码)而且我的表单有十几个日期!

所以我的问题是,我可以通过更短的解决方案获得相同的结果吗？

在这个答案中,我向我解释了使用selectItem来获取select事件.

但此时,我绑定到文本框的模型仍然是用户键入的原始文本,而不是选择项.

我用

(selectItem)="search(model)"

得到这个事件,并在TS

search(model) { 
this._service.search(model).subscribe(
  results => this.results = results,
  error => this.errorMessage = <any>error);

}

但如上所述,它使用用户输入的文本调用我的后端,而不是typeahead所选项目的全文.

我的后端记录

2017/03/24 20:44:14 /api/typeahead/ok
2017/03/24 20:44:14 /api/search/ok

其中第二个应该是/ api/search/$ actualSelectedItem.

下面是我用来设置minDate的代码

 <input ngbDatepicker #d="ngbDatepicker"  [minDate]="minDate" [formControl]="Form.controls['dateOfBirth']">

在组件中,我将minDate设置如下:

public minDate: Date = void 0; 
constructor() {
    this.minDate = new Date(1950, 1, 1);
}

但是,datepicker仍然将2007年视为minDate.有没有遗漏的东西.如果需要任何其他信息,请告诉我.

谢谢你的时间.

我是角度4的新手,我正在尝试配置bootstrap.我安装了ng-bootstrap:

https://ng-bootstrap.github.io/#/getting-started

我在页面上做了所有的事情,但我在页面上看不到引导程序.这是我的代码:

SRC /应用程序/ app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
   BrowserModule,
   FormsModule,  // add  this
   NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

SRC /应用程序/ app.component.html

<div class="container">

<h1 class="text-primary">{{title}} </h1>

<h2 class="text-primary">My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)"> …

node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts:191:9 中的错误 - 错误 TS1086：无法在环境上下文中声明访问器。

191 设置 ngbPanelToggle（面板：NgbPanel）；~~~~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/checkbox.d.ts:28:9 - 错误 TS1086：无法在环境上下文中声明访问器。

28 设置focused(isFocused: boolean); ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:14:9 - 错误 TS1086：无法在环境上下文中声明访问器。

14 禁用（）：布尔值；~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:15:9 - 错误 TS1086：无法在环境上下文中声明访问器。

15 设置禁用(isDisabled: boolean); ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:61:9 - 错误 TS1086：无法在环境上下文中声明访问器。

61 设定值（值：任意）；~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:65:9 - 错误 TS1086：无法在环境上下文中声明访问器。

65 设置禁用（isDisabled：boolean）；~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:66:9 - 错误 TS1086：无法在环境上下文中声明访问器。

66 setfocused(isFocused:boolean); ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:67:9 - 错误 TS1086：无法在环境上下文中声明访问器。

67 得到检查（）：布尔值；~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:68:9 - 错误 TS1086：无法在环境上下文中声明访问器。

68 禁用（）：布尔值；~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:69:9 - 错误 TS1086：无法在环境上下文中声明访问器。

69 获取值（）：任何；~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:70:9 - 错误 TS1086：无法在环境上下文中声明访问器。

70 获取 nameAttr(): 字符串；~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts:42:9 - 错误 TS1086：无法在环境上下文中声明访问器。

42 …

我在代码中使用了一个angular2 ng-bootstrap模式.

我希望当我在模态外单击时,模态不会关闭.目前,模式在外部点击时关闭.

在angular1中我曾经通过[keyboard] ="false"[backdrop] ="'static'"来做到这一点.但现在是时候它没有在angular2中工作了.

这是我的傻瓜

我的Open方法如下:

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

我试图关闭通过open(内容)函数呈现给我的模态,如ng-boostrap 文档中的示例所示.在网站上,它提到我可以致电NgbActiveModal关闭或解雇.

所以我在组件中包含了NgbActiveModal并尝试调用dismiss()或close().它们都不起作用.首先,dismiss()是未定义的(我导入NgbActiveModal错了吗？)当我调用close()时,似乎想调用lib.dom.d.ts中的一些奇怪的函数,这根本不是我想要的.所以对我而言,即使在我导入NgbActiveModal之后,似乎我也无法访问ng-bootstrap提供的关闭和关闭.请注意,我可以显示模态罚款

在该示例中,通过(click)="c('Close click')"关闭模态.我不知道它来自哪里.

那么......我怎样才能调用close()或dismiss()(无论哪个有效)来摆脱模态

使用Angular 2.3.1和ng-bootstrap 1.0.0-alpha.18.我试图以编程方式从组件中选择基于ID的选项卡,而不是从模板中选择.目标是从URL中提取param并使用它来选择ngOnInit中的选项卡

模板

<section id="policy-terms">
<ngb-tabset>
  <ngb-tab title="Terms and Privacy" id="terms">
    <template ngbTabContent>
      <div class="container page-content">

      </div>
    </template>
  </ngb-tab>
  <ngb-tab title="Company Policy" id="policy">
    <template ngbTabContent>
      <div class="container page-content">

      </div>
    </template>
  </ngb-tab>

</ngb-tabset>
</section>

和组件代码:

import { Component, OnInit } from '@angular/core';
import { NgbTabset } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-policy-terms',
  templateUrl: './policy-terms.component.html',
  styleUrls: ['./policy-terms.component.scss'],
  providers: [
       NgbTabset
   ]
 })
 export class PolicyTermsComponent implements OnInit {

 constructor(
    public tabset: NgbTabset
  ) { }

  ngOnInit() {
    this.tabset.select('policy');
   }
}

这只会产生一个错误:

控制台日志错误 …

我想在Angular中注销时关闭所有对话框(mat-dialog,bootstrap modals和sweet alert).这是在AngularJS(版本1.5)中完成的方式:

function logout() {
  //hide $mdDialog modal
  angular.element('.md-dialog-container').hide();

  //hide any open $mdDialog modals & backdrop
  angular.element('.modal-dialog').hide();
  angular.element('md-backdrop').remove();

  //hide any open bootstrap modals & backdrop
  angular.element('.inmodal').hide();
  angular.element('.fade').remove();

  //hide any sweet alert modals & backdrop
  angular.element('.sweet-alert').hide();
  angular.element('.sweet-overlay').remove();
}

我怎么能在Angular中做到这一点？使用$('.mat-dialog-container')或$('.inmodal')不给我一个选择hide()或做close()

我尝试过这样做,但我无法获得元素参考:

import { ElementRef, Injectable, ViewChild } from '@angular/core';
import { MatDialog, MatDialogContainer, MatDialogRef } from '@angular/material';

export class MyClass
{
  @ViewChild('.mat-dialog-container') _matDialog: ElementRef;
  @ViewChild('.mat-dialog-container') _matDialogRef:MatDialogRef<MatDialog>;

  constructor() { }

  function logout()
  {
    //access the …