标签: ngx-bootstrap

我已经实现了 ngx-bootstrap 的工具提示，并且工具提示在正常情况下工作正常。但我想有条件地显示工具提示。

当我包含 isDisabled 属性时，我在以下任何场景中都看不到工具提示。我错过了什么吗？

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="true"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

（或者）

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="false"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

我有两个组件，客户和客户的组件。客户组件包含一个客户列表，当我点击一个客户时，客户组件应该打开一个模式。

客户.component.ts

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

import { CustomerComponent } from '../customer/customer.component';

export class Customer {
  id: number;
  name: String;
}

const CUSTOMERS: Customer[] = [
  {
    id: 1,
    name: 'Customer one'
  },
  {
    id: 2,
    name: 'Customer two'
  }
];

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css'],
  providers: [
    CustomerComponent
  ]
})
export class CustomersComponent implements OnInit {
  title: String;
  customers: Customer[] = CUSTOMERS;
  customerComponent: CustomerComponent;
  // or
  @ContentChild(CustomerComponent)
  public customerComponent: CustomerComponent;

  constructor() { …

我在 Angular 4 中使用多个引导模式确实有问题。也许你可以帮我解决这个问题。该代码仅使用一种模态即可正常工作。我无法使用第一个加载的模态的按钮/表单。第二个工作正常。打开和关闭第二个模态后，第一个模态也起作用了……很奇怪。有什么不对？

<!-- ADD MODAL-->
<div bsModal #addModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myAddModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Add Dimension</h4>
        <button type="button" class="close" (click)="addModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="formGroupInput">TAG</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" aria-describedby="keyHelp"
              value="" disabled>
            <small id="keyHelp" class="form-text text-muted">Notice that this field is a surrogate key!</small>
          </div>
          <div class="form-group">
            <label for="formGroupInput2">Name</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value="">
          </div>
          <div class="form-group">
            <label for="formGroupInput3">Description</label>
            <input …

我在理解日期选择器组件的文档时遇到一些困难。

日期选择器文档

我的理解是：

• [(bsValue)]应该设置为控制器上我想用 Date 对象填充的变量
• bsDatepicker是使其成为日期选择器的指令

我不明白的是：

• #dp=bsDatepicker这是做什么的
• (click)=dp.toggle()抛出有关调用未定义的属性切换的错误，但它确实有效！

我确实知道这个规范不是最终的，但是这些属性是什么以及它们应该做什么？

显示模态时，如何禁用 TAB 等关键事件？我在页面上的表单中有多个按钮和字段，可以通过 Tab 键选择（聚焦）。我想在显示模态时禁用它。该应用程序使用 Angular，模态位于子组件中。

<button tabindex="0">Button1</button>
<button tabindex="0">Button2</button>
<form>...</form>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">...</div>
  </div>
</div>

我正在使用 Bootstrap 列表组和 Angular 5 我想知道如何在特定点击列表组时启用或设置为活动状态。现在我的问题是，当我单击其中一个时，它会全部启用或将它们全部设置为活动状态。我只想在列表组上启用特定列表。

-- Bootstrap 4
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

-- my list
<ul class="list-group">
  <li class="list-group-item" [class.active]="!isActive" (click)="onClick(s)" *ngFor="let s of $speech | async" [value]="s.$key">
    {{s.speech}}
    <i class="fa fa-chevron-right"></i>
  </li>
</ul>

-- from the components

 isActive = false;

  onClick(s) {

    console.log(s)

    this.isActive = !this.isActive;
  }

我想在ngx-bootstrap的日期选择器中添加自定义样式（角度4），因为我希望日期选择器的标头具有白色背景，并且标头中存在的所有文本（例如月份名称，箭头键，年份）黑色。

bs-datepicker.css中的默认样式不提供所需的样式。除了修改库文件以外，是否还有其他选择可以修改默认样式，因为这不是一个选择。

我正在使用ngx-charts更准确的bar-horizo​​ntal。我想要做的是格式化数据标签并在最后添加 % 。我曾尝试使用[xAxisTickFormatting]但它不起作用，因为从我注意到的情况来看，我的值不在ngx-charts-x-axis 上，而是在ngx-charts-series-horizo​​ntal 上。

ngx-charts 用作波纹管：

<ngx-charts-bar-horizontal 
*ngIf='givesEnergyChartData && givesEnergyDataColorScheme'  
[scheme]="givesEnergyDataColorScheme"
[results]="givesEnergyChartData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[view]="viewGiveEnergy"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[showDataLabel]="showDataLabel">
</ngx-charts-bar-horizontal>

我也试过格式化数据数组（我知道这很愚蠢，但我试过:)）

this.givesEnergyChartData = this.statistic.givesEnergyData.map(
 s => {
   return { name: s.name, value: s.count } 
 });

通过添加值： s.count + '%'。

那么，我应该怎么做才能格式化数据标签并在值后添加“%”？

这是我的图表

所以我正在使用 ngx-bootstrap。当我使用单图像轮播时，它工作得很好，但在多图像中，我得到的只是左边的第一张图像，没有别的。

<p>
  If `true` - carousel indicators indicate slides chunks works ONLY if singleSlideOffset = FALSE
</p>
<carousel [itemsPerSlide]="itemsPerSlide"
          [singleSlideOffset]="false"
          [interval]="false"
          [indicatorsByChunk]="true">
  <slide *ngFor="let slide of slides; let index=index">
    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
    <div class="carousel-caption">
      <h4>Slide {{index}}</h4>
    </div>
  </slide>
</carousel>

下面是角度代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {  itemsPerSlide = 3;
  singleSlideOffset = false;
  noWrap = false;


  slides = [
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'}, …

我正在使用实现多列表轮播，"ngx-bootstrap": "6.0.0",但看起来它在angular: 10.0.2. 我也试过了ngx-bootstrap: 6.0.0，也没用

它只显示一张幻灯片 [第一张图片] 和其余图片的占位符。就像如果itemsPerSlide是 3，它只显示 1 个图像和 2 个图像的占位符。

组件代码

@ViewChild(CarouselComponent) myCarousel: CarouselComponent;
  loopcomplete = true;
  slidesChangeMessage;
  itemsPerSlide = 3;
  singleSlideOffset = true;
  noWrap = true;
  activeRange = 0;

  slides = [
    {image: 'assets/slides/1.jpeg'},
    {image: 'assets/slides/2.jpeg'},
    {image: 'assets/slides/3.jpeg'},
    {image: 'assets/slides/4.jpeg'},
    {image: 'assets/slides/5.jpeg'},
    {image: 'assets/slides/6.jpeg'},
    {image: 'assets/slides/7.jpeg'},
    {image: 'assets/slides/8.jpeg'},
    {image: 'assets/slides/9.jpeg'},
    {image: 'assets/slides/10.jpeg'},
    {image: 'assets/slides/11.jpeg'},
    {image: 'assets/slides/12.jpeg'},
  ];

HTML代码

<div>
  <carousel [itemsPerSlide]="itemsPerSlide"
            [singleSlideOffset]="singleSlideOffset"
            [noWrap]="!noWrap"
            [interval]="false"
            [startFromIndex]="0"
            (slideRangeChange)="onSlideRangeChange($event)">
    <slide *ngFor="let …