标签: ngx-bootstrap

我试图让我的前端应用程序(Angular5.1.x)运行但由于模板解析错误而停止:

"let-" is only supported on ng-template elements. ("
</thead>
<tbody>
<template ngFor [ngForOf]="rows" [ERROR ->]let-rowz="$implicit" let-    index="index">
<tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].sec"):     
ng:///DatepickerModule/DayPickerComponent.html@52:58
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24633)
    at JitCompiler._parseTemplate (compiler.js:34442)
    at JitCompiler._compileTemplate (compiler.js:34417)
    at compiler.js:34318
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34318)
    at compiler.js:34188
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34187)

我想我需要遵循这个主题问题,说我需要使用ngx-bootrap @ ngx-bootstrap @ 2.0.0-beta.8,但它不适用于那个或v.2.0.0-rc.0

https://github.com/valor-software/ngx-bootstrap/issues/3024

...任何帮助表示赞赏

在Angular 4应用程序中使用ngx-bootstrap Datepicker,

我知道通常你可以这样指定日期格式:

<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">

但是这次我在一个模板驱动的Angular形式里面,所以我的输入没有绑定到myModel上面例子中的变量,但它只是绑定到表单:

<input id="from" name="from"
       bsDatepicker ngModel>

那么在这种情况下如何指定日期格式？

编辑:看起来实现这一点的方法是newVar在组件内创建一个新变量,然后将其绑定到[(bsValue)]="newVar":

<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">

不过我想知道是否有更好的解决方案.

在我的Angular 4应用程序中,我有一些带有表单的组件,如下所示:

export class MyComponent implements OnInit, FormComponent {

  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({...});
  }

他们使用Guard服务来防止未提交的更改丢失,因此如果用户在请求确认之前尝试更改路由:

import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
  form: FormGroup;
}

export class UnsavedChangesGuardService implements CanDeactivate<FormComponent> {
  canDeactivate(component: FormComponent) {
    if (component.form.dirty) {
      return confirm(
        'The form has not been submitted yet, do you really want to leave page?'
      );
    }

    return true;
  }
}

这是使用一个简单的confirm(...)对话框,它工作得很好.

但是我想用更花哨的模态对话框替换这个简单的对话框,例如使用ngx-bootstrap Modal.

如何使用模态来实现相同的结果？

我在项目中使用ngx bootstrap datepicker

仅需要像上面的图像一样选择月份和年份

<input type="text"
         class="form-control"
          (bsValueChange)="modelChanged($event)"
          #dp="bsDatepicker"
          bsDatepicker [(bsValue)]="bsValue"
          [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
          >

有没有办法像这样配置日期选择器？或建议任何允许此功能的替代日期选择器

在我的项目中,我使用的是bootstrap 4和ngx-bootstrap.现在我需要创建一个包含2个可滚动div的组件,由制表符切换.

我想在stackblitz中展示一个示例应用程序,但我无法创建它.

所以这是我要放置这些标签的组件:

<div class="d-flex flex-column h-100">
  <div class="border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style="height: 60px !important;">
    <input type="text" class="form-control" id="search" placeholder="Search...">
  </div>
  <tabset [justified]="true">
    <tab heading="Title 1">
      <ng-scrollbar [autoHide]="true">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab class="" heading="Title 2">
      <ng-scrollbar [autoHide]="true">
         <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

在AppFooList组件中,我将放置一个项目列表.例如,它类似于以下代码:

    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    ...

你可以帮我修改我的代码,使其正常工作吗？Ngx滚动条不适用于标签的内容.我的所有尝试都以滚动整个应用程序结束,因为内容的高度比应用程序的其余部分高,或者内容可滚动但是ngx滚动条未应用且滚动条很难看.我需要div的高度作为底部空间的其余部分.这就是我使用flexbox的原因.

编辑: stackblitz中的代码

我想要做的是从另一个组件打开一个模态,但是TypeError: Cannot create property 'validator' on string 'test1'当component1.html加载因为childModal包含时我不断收到此错误.如何摆脱这些错误并正确实施？

component1.html

<button type="button" class="btn btn-outline-primary btn-lg" (click)="modal.showModal()">Test
......
<child-modal #childModal ></child-modal>

component1.ts

 @ViewChild('childModal') childModal: ModalComponent;

modal.html

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog>
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
          <input type="text" formControl="test1">
          <input type="text" formControl="test2">
          </div>
     </div>
</div>   

modal.component.ts

constructor(private modalService: BsModalService) {
    this.form = new FormGroup({
      'test':                     new FormControl(),
      'test2':                    new FormControl()
      }) 
 }

我ngx-bootstrap在 Angular 5 项目中使用。有谁知道如何结合日期选择器与Timepicker？当我选择一个时间时，它总是包括今天的日期。我想使用Datepicker.

如果可能的话，最好将它放在同一模型上。这个想法是将它传递给webapi接受datetime属性（c#）的 a 。

提前致谢！

使用ngx-bootstrap,如何在手风琴组标题中添加图标？例如:

<accordion-group heading="<i class='fa fa-users'></i> Users"> This content is straight in the template. </accordion-group>

我正在使用 BsModalRef 来显示模式并使用该content属性发送数据。所以我们有一些这样的：

this.followerService.getFollowers(this.bsModalRef.content.channelId).subscribe((followers) => {
    this.followerList = followers;
    this.followerList.forEach((follower) => {
      follower.avatarLink = this.setUserImage(follower.userId);
      this.followerEmails.push(follower.email);
    });
  });

我们在 bsModalRef ( this.bsModalRef.content.channelId) 的内容中设置 channelId 。它工作正常。现在我正在为此编写单元测试。问题是我无法模拟它。我尝试过覆盖、间谍等，但似乎没有任何效果。我正在使用此链接中提到的方法。一种替代方法是使用 TestBed，但我不太了解它的用途。任何人都可以帮我找到可以实现这一目标的任何方法吗？

我正在尝试将 Angular 版本升级到 v8 后构建我的项目，当我编译我的项目时，出现以下错误，

1>Module not found : error : Can't resolve 'ngx-bootstrap' in 'C:\Users\can.pahali\source\WestCore.MvcSpa-Upgrade'
1>     @ dll vendor vendor[9]
1>    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/bootstrap/dist/css/bootstrap.css:
1>        Entrypoint mini-css-extract-plugin = *
1>    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/font-awesome/css/font-awesome.css:
1>        Entrypoint mini-css-extract-plugin = *
1>    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css:
1>        Entrypoint mini-css-extract-plugin = *
1>C:\Users\can.pahali\source\WestCore.MvcSpa-Upgrade\WestCore.MvcSpa.csproj(156,5): error MSB3073: The command "node --max-old-space-size=4096 node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" exited with code 2.
1>Done building project "WestCore.MvcSpa.csproj" -- FAILED.
========== Rebuild All: 0 succeeded, 1 failed, 0 skipped ==========

我的ng …