标签: ngx-bootstrap

我使用 ngx-bootstrap 手风琴来显示博客文章列表。

这是模板：

<accordion id="blog-list">
    <accordion-group *ngFor="let post of posts; let first = first;" [isOpen]="first" id="post-{{post.id}}">
        <!-- Here goes content irrelevant to the question -->
    </accordion-group>
</accordion>

我还使用一些全局配置，一次只打开一个折叠面板。

export function getAccordionConfig(): AccordionConfig {
  return Object.assign(new AccordionConfig(), { closeOthers: true });
}

现在，当帖子更新时，我会在列表中更新它，如下所示：

constructor(private elementRef: ElementRef, private postService: PostService) {
    this.postService.updatedPost.subscribe(val => {
      let i = this.posts.findIndex(post => post.id === val.id);
      this.posts[i] = val;
      let element = elementRef.nativeElement.querySelector('#post-' + val.id);
      element.setAttribute('isOpen', true); // <- this does not work
      element.scrollIntoView(true);
    }); …

我尝试将配置对象“bsConfig”值设置为“MMM-YYYY”。问题是，当我点击输入时，它会显示所有三个选项（日、月、年）以供选择。我只想显示月份和年份以供选择。当我选择一个特定日期时，它只在输入字段中显示月份和年份。显示部分很好，但我也希望日期选择器只显示要选择的月份和年份，而不显示要选择的日期。

这是我的示例代码。

在 html 文件中。

<input bsDatepicker [bsConfig]="bsConfig">

在 component.ts 文件中

bsConfig: Partial<BsDatepickerConfig>;

ngOnInit() {
this.bsConfig = Object.assign({}, {dateInputFormat: 'MMM-YYYY', selectDay: false, showWeekNumbers: false});

}

我安装了 ngx-bootstrap，包括“ngx-bootstrap/datepicker/bs-datepicker.css”文件，将它导入到组件中。一切都很好。除了它显示日期也选择何时我只想选择月份和年份。

请有人帮助我。

我一直在使用 ngx-bootstrap 的 datepicker 来监听 onchange 事件，这样每当用户更改输入的日期时我就可以获取数据。

一切工作正常，除了bsValueChange最初在页面加载时触发并返回Unhandled rejection SequelizeDatabaseError: invalid input syntax for type date: "Invalid Date".

这是我的日期选择器代码块

<input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue" [bsConfig]="{ rangeInputFormat: 'MM/DD/YYYY' }"
  (bsValueChange)="onValueChange($event)">

我也研究过这个github 问题，但这对我来说也不起作用，因为它ngModelChange不再起作用了。

我只想bsValueChange在整个页面加载后触发一次。

我的要求是在同一个 html 中使用两个以上的日期选择器。我正在使用 ngx-bootstrap 日期选择器。我的日期选择器有一个点击日期选择器显示的图像。但是当我使用两个以上的日期选择器时，日期选择器无法正常工作。只是说我有两个日期选择器，上面有图像 A 和 B。当我点击日期选择器的图像时会显示 A，但是当我点击 B 的图像时，它只切换 A，反之亦然. 单击图像时，我正在调用 dp.toggle() 函数，这对于其他日期选择器也是相同的。我可能是非常错误的，但我认为因为它指的是同一个旧的 dp 实例。我不能使用日期范围选择器，因为在日期范围选择器中为两个日期选择值是强制性的，而对我来说情况并非如此。

我尝试谷歌搜索，但没有找到任何相关信息。任何帮助/建议将不胜感激。谢谢

我有一个问题,在我的路由器选项卡中,只在链接上单击右键工作.如果单击链接下方或周围,则选项卡会切换,但路径不会.并且这个视图选项卡是空白的,我认为在链接中路由器是可以的,但是tab的周围是一个事件javascript.

<tabset >
    <tab>
        <ng-template tabHeading>
                <a class="routing_link" [routerLink]="['/VariablesParamCrear']" >Asociar</a>
        </ng-template>
    </tab>
    <tab [active]="tabset" >
        <ng-template tabHeading>
            <a class="routing_link" [routerLink]="['/VariablesParamCrear']">Crear</a>
        </ng-template>
        <h1>Hola putitos</h1>
    </tab>
    <tab>
        <ng-template tabHeading>
                <a class="routing_link" [routerLink]="['/VariablesOrder']">Ordenar</a>
        </ng-template>
    </tab>
    <tab>
        <ng-template tabHeading>
                <a class="routing_link" [routerLink]="['/VariablesFilter']">Filtrar</a>
        </ng-template>
    </tab>    

我试图使用带有循环变量数据的模板显示弹出窗口，但出现以下错误：

There is no directive with "exportAs" set to "bs-popover" ("template>
                      <span [popover]="popTemplate" popoverTitle="Anomalies" triggers="" [ERROR ->]#pop="bs-popover"></span>
                      <span *ngIf="vehicle.anomalies.length > 0" class="ba"): ng:///VehiclesModule/VehiclesSearchComponent.html@61:89
Can't bind to 'popover' since it isn't a known property of 'span'. ("
                        </ul>
                      </ng-template>
                      <span [ERROR ->][popover]="popTemplate" popoverTitle="Anomalies" triggers="" #pop="bs-popover"></span>
             "): ng:///VehiclesModule/VehiclesSearchComponent.html@61:28
Error: Template parse errors:
There is no directive with "exportAs" set to "bs-popover" ("template>
                      <span [popover]="popTemplate" popoverTitle="Anomalies" triggers="" [ERROR ->]#pop="bs-popover"></span>
                      <span *ngIf="vehicle.anomalies.length > 0" class="ba"): ng:///VehiclesModule/VehiclesSearchComponent.html@61:89
Can't bind to 'popover' since it isn't a …

我已经ngx-bootstrap使用该命令进行了安装，npm install ngx-bootstrap --save但是当我尝试构建解决方案时，它仍然说

ERROR in src/app/app.module.ts(37,45): error TS2307: Cannot find module 'ngx-bootstrap/modal'.

我已经检查了 node_modules 文件夹ngx-bootstrap/modal是否存在。

这是我的包裹

 {
  "name": "test-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@ng-select/ng-select": "^1.6.3",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "angular2-jwt": …

I have a module which looks something like:

@NgModule({
  imports: [
    EmployeeRoutingModule,
  ],
  declarations: [
    ListEmployeeComponent,
    EmployeeDialogComponent,
  ],
  providers: [
    EmployeeService,
    BsModalService,
  ],
  entryComponents: [
    EmployeeDialogComponent,
  ]
})
export class EmployeeModule {
}

And it is imported into the app module like so

{
  path: 'employee',
  loadChildren: './employee/employee.module#EmployeeModule'
},

within the app.routing.ts.

When I try and use EmployeeDialogComponent in my EmployeeModule it keeps giving off the error

ERROR Error: No component factory found for EmployeeDialogComponent. Did you add it …

我正在学习 angular 和面临的问题，同时在 ngx-bootstrap carousal 中使站点响应。是否可以在 ngx-bootstrap carousal 中进行响应式更改？

在主视图中，我每个视图显示 3 张图像，而我只想在移动视图中显示 1 张图像。在这里我分享我的代码。

testimonials.component.html 中的代码

<carousel [itemsPerSlide]="itemsPerSlide" [singleSlideOffset]="singleSlideOffset" [interval]="false" [noWrap]="noWrap">
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
</carousel>

testimonials.component.ts 文件中的代码

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

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent implements OnInit {
    itemsPerSlide = 3;
    singleSlideOffset = false;
    noWrap = false;
    slidesChangeMessage = …

我正在使用 angular 8 和 ngx-boostrap 打开模态并将数据从父级传递到模态。但没有按预期工作。我该怎么做才能使它工作？.. 这是我的stackblitz演示和代码

HTML

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Just a modal with a {{initialState.data1}}
  </div>
</ng-template>

成分

openModal(template: TemplateRef<any>) {
    const initialState = {
    data1 : 'foo'
}
    this.modalRef = this.modalService.show(template, {initialState});
  }