标签: ngx-bootstrap

我有一个场景，将数据保存到数据库后，我需要关闭Bs-modal弹出窗口，并且我的保存是在子组件中完成的，因此我Bs-modal使用 ()Input 在子组件中传递，并使用那里隐藏弹出窗口，但无法读取我的子组件中的模态

HTML 父组件

<div bsModal #lgModal2="bs-modal" class="modal fade" tabindex="-1" 
     role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
          <h4 class="modal-title pull-left">Edit Product</h4>
          <button type="button" class="close pull-right" (click)="lgModal2.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
          </div>
           <div class="modal-body">
           <app-edit-product [productId]="prodId" [modalId]="lgmodal2" #child ></app-edit-product>

           </div>
       </div>
     </div>
   </div>

子组件 TS

import { BsModalRef } from 'ngx-bootstrap';
export class EditProductComponent implements OnInit {
  @Input() modalId:BsModalRef;
  somefunction(){
    this.modalId.hide();
  }
}

错误：发生意外错误！类型错误：无法读取未定义的属性“隐藏”

也尝试过

@Output() closeModal:EventEmitter<Event> = new EventEmitter();
@Input() onHide:any;

然后 …

我想使用 ngx-bootstrap 库的可排序组件。问题是使用模板时可排序项目是空的。我的项目是具有一些简单值（包括名称和 ID）的对象。我想显示名称属性值。这些是我丑陋的 bs-sortable 和 ng-template 标签：

<bs-sortable
    [(ngModel)]="items"
    [itemTemplate]="itemTemplate"
    itemClass="list-group-item"                    
    itemActiveClass="sortable-item-active"
    placeholderItem=""
    placeholderClass="placeholderStyle"
    wrapperClass="sortable-wrapper"></bs-sortable>
<ng-template #itemTemplate let-item="item" let-index="index">
                <span (click)="selectItem(item)" [class.active]="item.id === currentItem.id" [class.iteminactive]="!item.active">
                    {{item.name}}
                </span>
            </ng-template>

在我的 component.ts 中，我有一个 items:IssuePriority[] 属性，其中包含两个值。此代码生成两个可排序的空行，只是它们都是空的。我究竟做错了什么？它无需使用模板即可工作，但我至少需要使用此模板才能设置我的 css 类和方法。

我如何将 BSdatePicker 的语言更改为 pt_br 我尝试在 bs-locale-service 中进行修改，所以我收到了错误信息 Khronos locale error: please load locale "pt-br" before using it

我们正在使用 ngx-bootstrap，我们需要一个日期选择器。所以ngx-bootstrap 的 Datepicker似乎是一个显而易见的选择。当用户导航到下个月时，我们希望加载日历的可用日期。为此，我们想订阅一些事件。我在文档中没有看到这样的事件。但我确实在（常规）引导程序变体 datepicker 的文档中看到了它。我尝试了各种方法，甚至进入 dom 并为单击事件添加事件侦听器。这有效了 1 次，然后可能会重新渲染 UI 并重新创建按钮。最后的手段似乎要么使用 MutationObserver （非常痛苦），要么下载日期选择器的源代码并将其破解（也很痛苦）。这似乎是一件微不足道的事情：知道日历的月份何时变化。但我还没有到达那里。任何帮助深表感谢！

有没有一种方法可以禁用ngx-bootstrap模态的动画？

我尝试添加此配置，但无法正常工作：

config = {
  animated: false,
  backdrop: 'static'
};

演示：

https://stackblitz.com/edit/ngx-bootstrap-cwfhnu?file=app%2Fmodal-component%2Fstatic-modal.component.html

该模态仍显示动画。

因为在某些情况下，在更复杂的网页中使用模式时显示速度非常慢（例如单击后2秒钟左右），所以禁用动画可能会更好。

我将ngx-botstrap BsDatepickerModule用于我的申请表，并且我只要求选择一个月。有谁知道我在哪里可以找到解决方案？这个问题在大约一年前就已经提出，并且看起来非常迫切，因此我隐瞒了获得答案的希望。单击日期选择器按钮后，我希望看到的是：

我需要增加 ngx-bootstrap 工具提示的宽度，我已经尝试了所有我能找到的解决方案，但都没有成功。

HTML：

<a [tooltip]='acctTooltip' placement='bottom'>{{item.AccountNumber}}
...
<ng-template #acctTooltip>
    <!--TODO: figure out how to get the tooltip width to widen-->
    <div>
        <table>
            <tr>
                <th>Title &amp; Address:</th>
                <td>
                    {{item.Title1}}<br /> {{item.Title2}}
                    <br /> {{item.Title3}}
                    <br />
                </td>
            </tr>
            <tr>
                <th>C/M:</th>
                <td>{{item.CreditType}}</td>
            </tr>
            <tr>
                <th>ServiceType:</th>
                <td>{{item.ServiceType}}</td>
            </tr>
            <tr>
                <th>Role:</th>
                <td>{{item.Role[0].Capacity}}</td>
            </tr>
        </table>
    </div>
</ng-template>

[更新] 将它放在 style.css 中确实会导致它旋转 45 度（用于验证），背景可以缩小但不能扩展。所以在内部 html 中有更多的东西。

.tooltip.bottom  {
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-right: none;
    max-width: none;
    height: 10px;
    transform: rotate(45deg);
    background: white;
}

问题是“按钮”被禁用，CSS 在图标周围应用了一个框架。如何更改 css“.disable”以避免应用框架。我想创建一个新类.disable，因为当我禁用按钮时，这个 css 就可以了。

<button class="btn btn-icon button-transparent" (click)="deleteItem()" [disabled]=user.readOnly><i class="fa fa-trash"></i></button>

我在使用 angular 14 的 package.json 安装 ngx-bootstrap 时遇到问题，如下所示：

{
  "name": "testproj",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.3",
    "@angular/cli": "~14.0.3",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0", …