标签: ng-bootstrap

我只是想用 ng-boostrap 在模态中提交一个表单，它比应有的要复杂得多，我使用 ng-boostrap 来避免 JQuery 代码永远不优雅，但它有一个成本......我有点沮丧，简单和常见的东西应该更简单。

这是我的模态模板：

<form (ngSubmit)="onSubmit()">
  <ng-template #newCategory let-c="close" let-d="dismiss">
    <div class="modal-header bg-primary text-white text-uppercase">
      <h4 class="modal-title">{{ 'core.create_a_new_category' | translate | uppercase }}</h4>
      <button type="button" class="close text-white" aria-label="Close"  (click)="d()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary" (click)="c('Save click')">
        Add Category
      </button>
    </div>
  </ng-template>
</form>

<!-- Button that trigger modal -->
<div align="center" class="mt-2">
  <span class="mr-1">{{ 'core.want_to_create_custom_category' | translate }}</span>
  <button class="btn btn-lg btn-outline-primary" (click)="open(newCategory)">
    {{ 'core.add_custom_category' | translate }} …

我似乎无法设置 ng bootstrap typeahead 的下拉菜单的样式。

输入本身的样式很好（该组件仅包含输入/预输入），但没有任何内容适用于下拉菜单（尝试使用插入的 ngb-typeahead-window 以及 .dropdown-menu 类。

我正在尝试将数据传递到我的 ng-bootstrap 工具提示模板。按照此示例https://ng-bootstrap.github.io/#/components/tooltip/examples#tplwithcontext，我现在坚持添加该#t1="ngbTooltip"部分。因为我的元素是通过迭代数组创建的，所以我无法手动添加 #t1 部分。

这是我最好的尝试：

https://stackblitz.com/edit/ngbs-tooltip-dyn

当将鼠标悬停在“cell *”表格单元格之一上时，我希望工具提示使用来自tooltipData. 如有任何考虑和帮助，我们将不胜感激。

我刚刚使用 Angular CLI 创建了一个全新的 Angular 10 项目，然后在设置了初始模块并路由并测试其工作原理后，我使用以下命令按照建议添加了 ng-bootstrap：

ng add @ng-bootstrap/schematics

现在，当我尝试ng serve我的项目时，出现以下错误：

Failed to compile entry-point @ng-bootstrap/ng-bootstrap (module as esm5) due to compilation errors:
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.js:148:43 - error NG1006: Cannot combine @Input decorators with query decorators

148         "starTemplate": [{ type: Input }, { type: ContentChild, args: [TemplateRef,] },],
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:12:51 - error NG6001: The class 'NgbRating' is listed in the declarations of the NgModule 'NgbRatingModule', but is not a directive, a component, or a pipe. Either remove it …

我正在尝试使用 ngbootstra 订阅模式的关闭事件，但我不明白它是如何工作的。我有 2 个组件，第一个组件用于启动模式，第二个组件位于第二个组件内。

第一个

html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

TS

import { OtherComponent } from './../other/other.component';
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';

@Component({
  selector: 'app-joker',
  templateUrl: './joker.component.html',
  styleUrls: ['./joker.component.scss']
})
export class JokerComponent {
  constructor(private modalService: NgbModal, private activeModal: NgbActiveModal) { }

  open(): void{ 
    const modalRef = this.modalService.open(OtherComponent, {centered: true});
    modalRef.componentInstance.name = 'Gerardo';
  }
}

第二次

html

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4> …

我正在尝试在我的应用程序中创建一个可重用的模式，以使用ng-bootstrap 模式库quickView动态加载任何组件

就我加载文档中所示的相同示例组件而言，它工作正常，但不适用于我创建的用于测试的组件。

如何使用quickView模态来加载动态组件创建modal-body？

https://stackblitz.com/edit/angular-quickview

我使用简单的 if/else 根据 name 在模式中打开一个组件string。

<button class="btn btn-lg btn-outline-secondary mr-2" (click)="open('default')">Launch default</button>
<button class="btn btn-lg btn-outline-danger mr-2" (click)="open('red')">Launch red</button>
<button class="btn btn-lg btn-outline-primary" (click)="open('blue')">Launch blue</button>

open(name: string) {
    if (name === "default") {
      const modalRef = this.modalService.open(NgbdModalContent);
      modalRef.componentInstance.name = "Default";
    } else if (name === "red") {
      const modalRef = this.modalService.open(RedComponent);
      modalRef.componentInstance.name = "Red";
    } else if (name === "blue") {
      const modalRef = this.modalService.open(BlueComponent);
      modalRef.componentInstance.name …

我正在尝试使用 ngx-datepicker 但无论我做什么都会使标题（datepicker 导航部分）为空。

预期结果：
https://i.stack.imgur.com/4dBOO.png
当前结果： https:
//i.stack.imgur.com/UMjnY.png
https://i.stack.imgur.com/yhpOu。 PNG

我的日期选择器组件代码：

• 模板代码：

  <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

• 组件.ts

  import { Component, OnInit } from '@angular/core';
  import {NgbCalendar, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-date-picker',
    templateUrl: './date-picker.component.html',
    styleUrls: ['./date-picker.component.scss']
  })
  export class DatePickerComponent implements OnInit {
  
    model: NgbDateStruct;
    date: {year: number, month: number};
  
    constructor(private calendar: NgbCalendar) {
    }
  
    ngOnInit(): void {
    }
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 依赖项：

    "@angular/animations": "~11.1.2",
    "@angular/common": "~11.1.2",
    "@angular/compiler": "~11.1.2",
    "@angular/core": "~11.1.2",
    "@angular/forms": "~11.1.2",
    "@angular/platform-browser": "~11.1.2",
    "@angular/platform-browser-dynamic": "~11.1.2",
    "@angular/localize": "11.0.9", …

  Run Code Online (Sandbox Code Playgroud)

我基本上从ng-bootstrap Modal Documentaion复制了Modal示例,似乎我无法打开它.

只要我点击按钮打开Modal,Chrome的控制台就会大喊:

Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

提前致谢!

编辑:

这是我的模态组件代码:

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'add-transaction',
    templateUrl: './app/components/add-transaction/AddTransaction.html'
})
export class AddTransaction {
    closeResult: string;

    constructor(private modalService: NgbModal) {}

    open(content) {
        this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by …

可以将html放在ngbPopover中吗？确切地说,我需要列出项目清单.目前我有这个参数:

`ngbPopover="{{column.popup.get(row)}}" triggers="mouseenter:mouseleave" popoverTitle="{{column.popup.title | translate}}" container="body"`

我正在使用Angular 6并NgbModal喜欢

openViewDescriptionModal(id) {
  const viewModal = this.modalService.open(ProductComponent, {size: 'lg'});
}

但这会打开宽度为50％的模态，而两侧都留有25％的空间。

我想将模态宽度重新设计为最大窗口宽度的90％。

但是仅有sm和lg允许的大小NgbModal。

如何增加模态的宽度，或者可能如何使用自定义类来增加模态的宽度？

我尝试将值设置xl为，size但是它不起作用。我还尝试自定义模式类的CSS，但这也不起作用。