标签: ng-bootstrap

我使用ng-bootstrap替代angular2中的ui-bootstrap.

我的html如下:

<div class="row" style="height: 100%;">
  <div class="col-12">
    <div class="container" id="contentMain">
      <div class="card-my-profile">
        <div class="card-image">
          <div class="image-wrap">
            <div class="image-placholder" data-firstletter="S"></div>
          </div>
        </div>
        <div class="clearfix card-fluid">
          <div class="">
            <h4 class="title-card">Priya</h4>
            <div><span class="item-type">Title:</span> Job title</div>
            <div><span class="item-type">Location:</span> Bangalore</div>
          </div>
          <div class="">
            <div><span class="item-type">Contact:</span> 9876543210</div>
            <div><span class="item-type">Email:</span> priya@gmail.com</div>
            <div><span class="item-type">Experience:</span> 9 years</div>
          </div>
        </div>
        <div class="card-buttons">
          <a href class="btn btn-success btn-rounded text-uppercase">Resume <i class="bi_interface-tick small"></i> </a>
          <div class="text-right">
            <a class="inherit small" href>Update?</a>
          </div>
          <a [hidden]="!isNotUploaded" href class="btn btn-default btn-rounded text-uppercase">Upload CV</a>
          <ul class="list-inline …

我要在导航栏中添加一个登录下拉列表。但是，一旦单击登录表单中的某项，下拉列表就会关闭。

另一个问题：如何使下拉菜单与右侧的切换开关对齐？现在，它与切换左对齐。

这是我的代码：

<nav class="navbar navbar-dark bg-inverse">
   <ul class="nav navbar-nav">
      <li *ngIf="!user" class="nav-item dropdown float-xs-right">
        <div ngbDropdown autoClose="false" class="d-inline-block pull-left">
            <a class="nav-link" id="loginDropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Login</a>
            <div class="dropdown-menu" aria-labelledby="loginDropdown">
                <login></login> <!--The login component, it's just a form-->
            </div>
        </div>
      </li>
   </ul>
</nav>

我无法通过css隐藏ngb-carousel指示器和prev-next控件，以css类为目标是行不通的。是否可以隐藏它？

我刚刚在npm上安装了bootstrap4，font awesome和ng-bootstrap，并且正在尝试一些ng-bootstrap演示代码。什么都没用。

第一次发布，对Angular世界来说还很陌生。如果我没有以正确的格式发布此内容，或者在错误的“区域”中提出问题，请放轻松。

我只是想了解ng-bootstrap的用法。

app.module.ts：

  import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    import { RouterModule } from '@angular/router';
    import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    import { AppComponent } from './app.component';
    import { CustomersModule } from './customers/customers.module';
    import { WelcomeComponent } from './welcome/welcome.component';

    @NgModule({
     declarations: [
        AppComponent,
        WelcomeComponent
     ],
     imports: [
        BrowserModule,
        HttpClientModule,
        AngularFontAwesomeModule,
        RouterModule.forRoot([
            { path: 'home', component: WelcomeComponent },
            { path: '', …

如何将表单数组索引传递给ng-bootstrap标题中的getCities函数，包括当前输入文本。考虑3是表格数组索引。

address.component.html

<input name="city" type="text" id="city" formControlName="city" [ngbTypeahead]="getCities">

address.component.ts

getCities = (text$: Observable<string>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(query =>
        query.length < 2 ? [] : this.apiService.getCities(query).catch(() => {
            return Observable.of([]);
        });)

我使用ng-bootstrap 4（测试版8）。目前，我有这个：

<ng-template #rt let-r="result" let-t="term">
    {{ r.label }}
</ng-template>

<input
        id="typeahead-focus"
        class="form-control"
        [(ngModel)]="model"
        [ngbTypeahead]="search"
        [inputFormatter]="formatter"
        [resultTemplate]="rt"
        (focus)="focus$.next($event.target.value)"
        (click)="click$.next($event.target.value)"
        #instance="ngbTypeahead"
/>

现在，如果用户单击输入元素，我想打开预输入。我怎样才能做到这一点？

this.search = (text$) =>
    text$
        .map(term => (term === '' ? this.items : this.items.filter(v => v.label.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));

this.formatter = (x: {label: string}) => {
    console.log(x);
    return x.label;

Angular Bootstrap模态中的所有示例都有一个外部按钮来触发模态本身。

就我而言，我使用的是具有功能的图表nodeClicked(event, node)。

在该功能中，我检查用户CTRL在单击节点时是否按下了按钮。如果没有，我需要触发一个Modal，说明未单击该按钮。

component.html

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Warning</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>NO <kbd>CTRL</kbd> Button Pressed.</p>
        <p>If previous Selection were selected using Multiselect Feature, they will be deleted.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
    </div>
</ng-template>

within the nodeClicked() function:

component.ts

constructor (modal: NgbModal) {}
....
nodeClicked(ev, node) {

if (ev.control) {
  //perform necessary stuff
}
else { …

我正在使用ng-bootstrap用Bootstrap编写Angular应用程序。我在这样的组件中封装了一个弹出窗口：

HTML（弹出框组件）

<div>
  <div>Data 1: <i>{{ v.data1 }}</i></div>
  <div>Data 2: <i>{{ v.data2 }}</i></div>
</div>

此弹出窗口在另一个组件中打开：

的HTML

<div *ngFor="let v of vector">
    <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
</div>

<ng-template #popOver>
    <popover></popover>
</ng-template>

我需要将ngFor的v参数传递给弹出框。我该如何实现？

我有一个Angular 6应用，我正在尝试实现从屏幕右侧滑入的模态窗口，如下所示：https : //codepen.io/anon/pen/OayRVy

但是，无论我做什么尝试，都无法覆盖模式窗口的位置。我唯一能够更改的是标题/正文的背景颜色。

我的模式HTML：

<ng-template #content let-modal="close">

      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Table of Contents</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dismissModal(modal)"><span aria-hidden="true">&times;</span></button>
      </div>

      <div class="modal-body">
        <p>
          ....
        </p>
      </div>

</ng-template>

组件代码：

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

  constructor(private modalService: NgbModal) {}

  public open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg'}).result.then((result) => {
      ...
    }, (reason) => {
      ...
    });
  }

如果我检查HTML并在Chrome DevTools中将float: right属性添加到.modal-dialog容器，它将完成我想要的操作。但是，添加一个

.modal-dialog {
  float: right;
}

到我的.scss文件中对该组件无效。

谁能告诉我如何覆盖默认的引导程序样式，以便我可以强制其显示在屏幕的右侧并占据其高​​度的100％？

我想使用Bootstrap 4设计角度的多选下拉功能。下图是下图。

以下是我到目前为止的实现。

             <div class="form-group">
                      <label>Employee privilege</label>
                      <select id="employeePrivelege" data-style="btn-default" 
                      class="selectpicker form-control" 
                      formControlName="employeePriveleges"
                      multiple data-max-options="2">      
                        <option selected>Mustard</option>
                        <option selected>Barbecue</option>
                          </select>
                    </div> 

我有两个问题

1. 如果在selected上添加属性，则不会选择元素option

我知道这种情况的发生是因为我不使用jQuery，并且我不想添加JQuery，因为在Angular中不建议这样做。

我的问题是

1. 在有或没有引导程序4的情况下，在Angular中实现多个下拉UI组件的最简单选择是什么？