标签: ng-bootstrap

尝试制作Play Framework(REST)并ng-bootstrap - Typeahead一起工作.但我面临从json响应中提取数据的问题.例如我写"test"(在数据库中搜索name),服务器返回json数组(一切都正确):

[{
  "id": 1,
  "name": "test",
  "annotation": "test annotation",
  "kiMin": 1,
  "kiMax": 2,
  "cosFiMin": 3,
  "cosFiMax": 4
}, {
  "id": 4,
  "name": "test2",
  "annotation": "test annotation",
  "kiMin": 1,
  "kiMax": 2,
  "cosFiMin": 3,
  "cosFiMax": 4
}]

但视图看起来像这样:

这是我的代码:

http.service.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Equipment }           from './equipment';
import { Observable }     from 'rxjs/Observable';
@Injectable()
export class HttpService {
  private Url = …

使用反应形式我添加了ngbDatePicker:

<input type="text"
        id="business_incorp_date"
        class="form-control"
        formControlName="business_incorp_date"
        ngbDatepicker
        #incorporatedDatePicker="ngbDatepicker"
        (click)="incorporatedDatePicker.toggle()"
        readonly>

对于以下形式的表单模型:

this.form = this.formBuilder.group({
  id: [
    0, [Validators.required]
  ],

  // ... removed for brevity

  business_type: [
    '', [Validators.required]
  ],
  business_incorp_date: [
    '', [FormValidators.date] // <-- NOT REQUIRED BY MODEL
  ],
  business_desc: [
    '', [Validators.required]
  ]

  // ...
});

但是,如果该字段为空,则对于以下内容仍然是ngInvalid ngbDateFormat:

{ "ngbDate": { "invalid": { "year": null, "month": null, "day": null } } }

任何人都知道如何使DatePicker字段允许空字符串？

假设我有这样的模态模板:

<div class="modal-header">
  <h3 [innerHtml]="header"></h3>
</div>

<div class="modal-body">
  <ng-content></ng-content>
</div>

<div class="modal-footer">
</div>

我从另一个组件调用这个模态,所以:

    const modalRef = this.modalService.open(MobileDropdownModalComponent, {
      keyboard: false,
      backdrop: 'static'
    });

    modalRef.componentInstance.header = this.text;

我怎么能用NgbModal绑定等放入html？成ng-content

我需要模拟NgbModal以角度进行一些单元测试,但我不知道如何做到这一点.这是我的功能:

    openModal(deviceID: string, productID: string){
        const modalRef =  this.modalService.open(ProductModal)
        modalRef.componentInstance.content = {
            deviceId: deviceID,
            productId: productID
        } 
        modalRef.componentInstance.toEmit.subscribe(($e) => {
            if ($e === true) this.reloadList();
        });
    }

我应该做些什么？

我正在为我的应用程序使用角度4和bootstrap 4 beta 2和ng-bootstrap,并使用ng-bootstrap.

我已经从bootstrap文档示例中添加了导航栏.

代码如下所示:

<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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

我还在angular-cli.json中添加了bootstrap样式.该代码如下所示:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css", …

我正在使用 ng-bootstrap 中的 ngbDatePicker。我正在尝试设置从 API 返回的默认日期。这似乎不起作用，因为我收到错误或浏览器冻结。代码片段看起来像这样

<input class="form-control" placeholder="dd-mm-yyyy" name="from" [ngModel]="formatDate(filter.nodes[0])" (ngModelChange)="filter.nodes[0] = updateDate($event)" ngbDatepicker #d1="ngbDatepicker">

filter.nodes[0] 是从 API 以字符串形式返回的日期值。我需要将其格式化为 JS 对象，以便将其绑定到输入。

我想更改ng bootstrap分页组件的样式并使用/deep/Angular 6应用程序中的链接.以下代码工作正常,但控制台显示警告,代码已被弃用.

那么,我应该如何更改它以摆脱警告？

这是我目前使用的CSS代码:

ngb-pagination /deep/ .page-item.disabled .page-link{
    background: none;
  }

 ngb-pagination /deep/ .page-item.active .page-link {
    background-color: #223C61;
    &:focus, &:visited{
      outline: none;
      box-shadow: none;
    }
  }

我尝试强制 jHipster 生成的 Angular 5 项目中的日期选择器使用波兰语语言环境，一周和几个月。据我了解有关文档：

https://ng-bootstrap.github.io/#/components/datepicker/examples#i18n

它应该使用默认设置，即：

共享-common.module.ts

...
import { registerLocaleData } from '@angular/common';
import locale from '@angular/common/locales/pl';
...

providers: [
    ...
    {
        provide: LOCALE_ID,
        useValue: 'pl'
    },
],
...
export class TestSharedCommonModule {
    constructor() {
        registerLocaleData(locale);
    }
}

用法

<input id="field_testDate" type="text" class="form-control" name="testDate" 
ngbDatepicker  #testDateDp="ngbDatepicker" [(ngModel)]="tester.testDate"
            required/>

不幸的是它不起作用，我也尝试了不同的方法，例如：

https://angular.io/api/core/LOCALE_ID

或者

https://github.com/NativeScript/nativescript-angular/issues/1147 - 我在这里复制了语言环境文件

你有什么想法可能是错的吗？

更新

我最终是这样解决的：

日期选择器-i18n.ts

import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
    en: …

我有一个反应式表单，当用户在输入中按下 ESC 键时，我想在表单隐藏之前显示一个“你确定”模式。
一旦显示模态，我就会在控制台中收到以下异常：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'ng-untouched: true'. Current 
value: 'ng-untouched: false'.

这是一个显示问题的 stackblitz（焦点输入并按 ESC）

注意：当您聚焦输入，模糊并再次聚焦时，问题不会再次出现ng-untouched变化。

有什么解决方法吗？实现此类功能的推荐方法是什么？

提前致谢！

我想将 ngbDatepicker 设置为从星期日开始一周，而不是默认的星期一。

我正在尝试使用weekStartsOn="0"但它没有效果。这是我的 html 代码

<input ngbDatepicker #d="ngbDatepicker" class="form-control" [minDate]="minDate" [maxDate]="maxDate" [markDisabled]="isDisabled" weekStartsOn="0">