标签: ng-bootstrap

我使用@ ng-bootstrap/ng-bootstrap和Angular2-cli

与NgbDatepicker遇到了错误:

NgModule:

@NgModule({
  imports: [CommonModule,NgbModule.forRoot()],
  declarations: [TestComponent],
  exports: [TestComponent]
})

零件 -

导出类TestComponent实现OnInit {

model:NgbDateStruct;

}

和html--

<ngb-datepicker #dp [(ngModel)] ="model"> </ ngb-datepicker>

将TestModule添加到另一个模块时

@NgModule({
  imports: [SharedModule,LoginRoutingModule,TestModule],
  declarations: [LoginComponent],
})

和HTML:

<app-test></app-test>

有错误:

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. …

我感兴趣的是如何TemplateRef通过传递一个string例子来获得一个.

我不想通过组件html获取它,因为我只想将它保存在配置中以用于所有组件.我正在引用NgbDatePickerConfig可以在这里查看的ng-bootstrap :https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-config.ts.

我正在尝试使用ngbmodal创建通用确认框,它将在整个应用程序中使用.其中,标题和消息将从调用组件传递给模态.我创建了一个DialogService并添加到entryComponents中.现在我可以显示确认框.但是无法得到结果.下面是显示ConfirmationBox组件的代码.如何从中获取价值

    const modalRef = this.modalService.open(ConfirmationBoxComponent,{backdrop:"static"})
    modalRef.componentInstance.name = "Message";
    modalRef.componentInstance.confirmationBoxTitle = "Confirmation?"
    modalRef.componentInstance.confirmationmessage = "Do you want to cancel?"
    modalRef.componentInstance.changeRef.markForCheck();

我正在尝试嵌套ng-bootstrap选项卡小部件,但嵌套选项卡的内容未正确显示.当我点击嵌套标签时,内容本身就会消失.

最小的演示

我究竟做错了什么？

这是视图代码:

            <ngb-tabset>
              <ngb-tab *ngFor="let tab of tabs">
                <ng-template ngbTabTitle>
                  {{ tab.title }}
                </ng-template>
                <ng-template ngbTabContent>
                  {{ tab.content }}

                  <ngb-tabset>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        1
                      </ng-template>
                      <ng-template ngbTabContent>
                        1
                      </ng-template>
                    </ngb-tab>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        2
                      </ng-template>
                      <ng-template ngbTabContent>
                        2
                      </ng-template>
                    </ngb-tab>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        3
                      </ng-template>
                      <ng-template ngbTabContent>
                        3
                      </ng-template>
                    </ngb-tab>
                  </ngb-tabset>

                </ng-template>
              </ngb-tab>
            </ngb-tabset>

我有以下html代码段.我正在使用angular2,ng-bootstrap ng选项卡.我的问题是如何在单击选项卡时调用方法单击？我添加(单击)但我看到当我单击选项卡时,根本没有调用fetchNews()方法.我究竟做错了什么？

  <ngb-tab title="Active" (click)="fetchNews('active')">
    <ng-template ngbTabContent>
      <table class="table table-sm table-striped">
        <thead>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Attachment</th>
          <th>Start Date</th>
          <th>End Date</th>
          <th>Actions</th>
        </tr>
        </thead>
        <tr *ngFor="let item of news">
          <td>{{item.title}}</td>
          <td>{{item.description | ellipsis:25}}</td>
          <td>{{item.attachmentUrl | ellipsis:25}}</td>
          <td>{{item.startDate | date: 'MM/dd/yyyy hh:mm a'}}</td>
          <td>{{item.endDate | date: 'MM/dd/yyyy hh:mm a'}}</td>
          <td>
            <button type="button" class="btn btn-secondary btn-sm" (click)="showNewsModal('active',item, true)">
              Modify
            </button>
          </td>
        </tr>
      </table>
    </ng-template>
  </ngb-tab>

以下是ng bootstrap提供的示例.

我只使用标签和值更改将相同的代码复制到我的角度项目中,并获得以下结果.

这是呈现的HTML

<div _ngcontent-c1="" class="btn-group btn-group-toggle special ng-valid ng-dirty ng-touched" name="radioBasic" ngbradiogroup="" role="group" ng-reflect-name="radioBasic" ng-reflect-model="user1">
      <label _ngcontent-c1="" class="btn-primary btn active" ngbbuttonlabel="">
        <input _ngcontent-c1="" ngbbutton="" type="radio" value="user1" ng-reflect-value="user1" name="radioBasic">User1
      </label>
      <label _ngcontent-c1="" class="btn-primary btn" ngbbuttonlabel="">
        <input _ngcontent-c1="" ngbbutton="" type="radio" value="user2" ng-reflect-value="user2" name="radioBasic">User2
      </label>

    </div>

为什么我的结果与示例不同？如何删除选择点？

任何修复或指向文档的指针将受到高度赞赏!

编辑:

版本在这里

Angular CLI:1.6.1

Angular:5.1.3

bootstrap@4.0.0-alpha.6

@ NG-引导/ NG-引导@ 1.0.0 beta.9

我需要使用 ReactiveForms[formGroup]和formGroupName="field"

<form [formGroup]="generalForm" (ngSubmit)="onSubmit()">
  <input class="form-control" placeholder="yyyy-mm-dd" 
  formControlName="dateIni" ngbDatepicker #a="ngbDatepicker">
</form>

组件.ts

generalForm: FormGroup;

ngOnInit() {
this.generalForm = this.formBuilder.group({
  name: ['', Validators.required],
  dateIni: ['', Validators.required],
  dateFin: ['', Validators.required],
  registerDateLimit: ['', Validators.required],
});

}

在我的代码中，我尝试设置一个默认值：

public dateIni: { year: 2017, month: 8, day: 8 };

或者

@Input() dateIni: { year: 2017, month: 8, day: 8 };

但它没有采用默认值，所有文档都只提到模板表单的情况。

任何想法我该怎么做？

已经尝试过这个和这个解决方案，但没有任何效果。

我正在使用 Angular 7 并尝试获取我已放置在ng-template标签中的参考变量。但它总是返回undefined

测试组件.html

<ng-template #abc>
  <div #xyz>    
  </div>
</ng-template>

测试组件.ts

@ViewChild('abc') abc: ElementRef; //---> works fine
@ViewChild('xyz') xyz: ElementRef; //---> undefined

测试组件.ts

ngAfterViewInit(){
  console.log(this.xyz); //---> undefined  
}

我已经尝试在 angular 的所有生命周期钩子中打印它，但它总是返回未定义。但是当我尝试将它放在ng-template 的外侧时，它工作得很好。

有什么办法吗？

我试图在应用程序中使用 NbgDropdown，但出现以下错误：

NullInjectorError：NgbDropdown 没有提供程序！

我的 app.module 文件如下所示：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...

NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        NgbModule.forRoot()
    ],
    providers: [
        ...
    ],
    bootstrap: [AppComponent]
})

从其他答案来看，这看起来应该是必需的

我看到以下简短的评论可能会有所帮助，但对我来说没有意义：

/sf/answers/3264582121/

我使用 ng-bootstrap 以 angular 开始了我的第一个项目，并按照安装过程进行了操作，但是它不起作用。

该消息是“未捕获的错误：您的应用程序或其依赖项之一似乎正在使用i18n.

Angular 9 引入了一个$localize()需要加载的全局函数。请添加import '@angular/localize';到您的 polyfills.ts 文件中。”

然后我在 polyfill.ts 中添加了这一行

import '@angular/localize';

现在消息变成了

未找到 ./src/polyfills.ts 模块中的错误：错误：无法解析“D:\source\mh\Reclamos-v2\src”中的“@angular/localize”

我应该安装什么？本地化库的名称是什么？