标签: ng-bootstrap

我想将 ngb-carousel 与 ngFor 一起使用，我的代码如下：\n代码

但这会产生一些错误，如下所示：

<ngb-carousel>\n  <template  ngFor let-home [ngForOf]="homes | async" >\n    <ngbSlide [home]="home">\n      <img src="{{item.thumb}}" alt="Random first slide">\n    </ngbSlide>\n  </template>\n</ngb-carousel>\n

home.component.html?c8ce:1 错误：模板解析错误:(\xe2\x80\xa6)

谁能给我一个使用 ngb-carousel 和 ngFor 的例子？

我想做原始的事情-将方法保存到我的模态。我这样做：

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
         <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <input [(ngModel)]="name"/>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-success" (click)="save()">Save</button>
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>`
})
export class NgbdModalContent {
  @Input() name;
  @Output() action; //Actually I can use @Input or nothing

  constructor(public activeModal: NgbActiveModal) {}

  save() {
    this.action(this.name)
  }
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: 'src/modal-component.html',
  providers: [HttpClient]
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal, …

我想为 D3 元素打开一个 onmouseover 弹出窗口。

从本质上讲，这意味着我的 component.html 文件几乎是空的，只包含 popover 模板：

<ng-template #popContent let-greeting="greeting">{{greeting}}, <b>{{name}}</b>!</ng-template>

我不能使用通常的

[ngbPopover]="popContent" popoverTitle="Greeting" #p="ngbPopover" triggers="manual"

属性，因为目标 D3 元素尚不存在

我需要的是能够以某种方式调用 popover 的 open 函数传递 popover 内容和位置。 在我的组件中是这样的：

public showPopover(node, text){ // node is the DOM element for which to show popover
 ... what should go here? ...
}

通常，打开模态框时，通过 HTML 调用该函数：

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

这将打开模式：

  <ng-template #content let-modal>
      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="dateOfBirth">Date of birth</label>
            <div class="input-group">
              <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
      </div>
    </ng-template>

但是，由于情况（我正在使用 Google Charts 并且我可以使用的 HTML(click) = "open(content"没有暴露给我），我需要能够通过 …

我收到错误

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngbAccordion" ("
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

    <ngb-accordion [ERROR ->]#acc="ngbAccordion" activeIds="ngb-panel-0">
      <ngb-panel title="Simple">
        <ng-template "): ng:///SurveysModule/SurveysComponent.html@4:19
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
      [ERROR ->]<ngb-panel title="Simple">
        <ng-template ngbPanelContent> …

我无法在 angular 7 页面加载时显示 ng-bootstrap 模式弹出窗口。

我试过下面的代码来打开它。

openVerticallyCentered(content) {

this.modalService.open(content, { centered: true });.
this.modalService.open(content, { beforeDismiss: false });

}

我正在使用 ng-bootstrap 和 Angular 7 创建一个标准的引导菜单，右侧有链接，但如果我使用下拉菜单，它会退出屏幕。为了确保我没有弄乱代码，我干净地安装了 angular、bootstrap（只是 angular.json 中的 css 代码）和 ng-bootstrap。我已经在 AppModule 中包含了 NgbModule 并尝试了以下代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown" ngbDropdown placement="bottom-right">
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="navbarDropdown">
          <a …

我的 Angular 项目中有一个 ng-bootstrap Carousel，我想改变一些东西，但不知道如何去做。

首先，当幻灯片更改时，我想有一个淡入淡出的效果，此时下一个图像刚刚出现。

其次，我想拥有自己的箭头和幻灯片指示器或更改样式！我试图通过 CSS 做到这一点，但我的代码似乎都没有被接受。

在我的幻灯片组件下方：

  images = [1, 2, 3, 4, 5, 6, 7].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);

  paused = false;
  unpauseOnArrow = false;
  pauseOnIndicator = false;
  pauseOnHover = true;

  @ViewChild('carousel', {static : true}) carousel: NgbCarousel;

  togglePaused() {
    if (this.paused) {
      this.carousel.cycle();
    } else {
      this.carousel.pause();
    }
    this.paused = !this.paused;
  }

  onSlide(slideEvent: NgbSlideEvent) {
    if (this.unpauseOnArrow && slideEvent.paused &&
      (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) {
      this.togglePaused();
    }
    if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) …

我有一个我想测试的模态组件。但它总是抱怨“找不到名称'ngbNav'的导出”。关于如何解决这个问题的任何想法都会很棒。

Error: Export of name 'ngbNav' not found!
        at cacheMatchingLocalNames (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13112:1)
        at resolveDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12871:1)
        at elementStartFirstCreatePass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21229:1)
        at ??elementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21271:1)
        at TemplateModalComponent_Template (ng:///TemplateModalComponent.js:381:9)
        at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12129:1)
        at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11899:1)
        at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13509:1)
        at renderChildComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11700:1)
        at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11925:1)

模板modal.component.html

    <div class="modal-header">
  <h4 class="modal-title" ngbTooltip="{{template ? template.id : ''}}" triggers="click:blur">{{"template_edit" | translate}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form class="form" [formGroup]="this.templateFormGroup">
    <div formGroupName="template">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label">Name</label>
            <div class="col-sm-9"> …

我正在尝试在 Angular 中打印 ng-bootstrap 模态的模态内容。该模式包含一个表格，因此我希望以相同的格式打印文档。我想要这里给出的相同功能，但无法实现它。

根据此链接，它设置打印期间的可见性body并hidden仅显示模态内容。但在 Angular 中，我们使用组件，因此设置body: hidden不起作用。它打印出整个文档（模态以及我不想要的背景组件、页眉和页脚）。

我已经遵循了很多解决方案，但无法这样做。

我还尝试将可打印的模式内容附加到新窗口，但写入新窗口只需要字符串。我在模态中使用表格，因此我希望打印相同样式的表格。

我怎样才能实现这个目标？

编辑1：这是我要打印的模态内容：

<div id="printable">
    <div class="row shipping">
      <div class="col-4">
        <h6>SHIPPING ADDRESS</h6>
        <p>
          {{ this.order.shipName }} : {{ this.order.addrLine1 }},
          {{ this.order.area1 }}, {{ this.order.area2 }},
          {{ this.order.countryCode }} - {{ this.order.pin }}
        </p>
      </div>
      <div class="col-4">
        <h6>SHIPPING METHOD</h6>
        <p>Standard</p>
      </div>
      <div class="col-4">
        <h6>ACCOUNT PAID</h6>
        <p>Paypal Account: {{ this.order.order.payerEmail }}</p>
      </div>
    </div>
    <br /><br />
    <div class="card">
      <table>
        <tr>
          <th>ITEM</th>
          <th>DETAILS</th>
          <th>QTY</th> …