小编Aak*_*mar的帖子

在组件内打开模态弹出窗口时,表达式已更改错误

我有一个父组件,我使用@ViewChild()将一些HTML传递给子公共组件.

当Child组件加载弹出窗口时.控制台抛出错误.

"ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化.上一个值:'ngIf:undefined'.当前值:'ngIf:这是描述'.看起来该视图是在其父项及其子项被脏检查后创建的.它是否已在变更检测钩子中创建？"

我正在使用'@ ng-bootstrap/ng-bootstrap'中的{NgbModal};

这是代码.

更新 - 此父组件在另一个父html文件中称为app-parent-component.

父组件

@ViewChild('templateToLoad') templateToLoad;


constructor(private modalService: NgbModal, private ChangeDetector: ChangeDetectorRef) {
}

ngOnInit() {
    this.openPopup();
}

ngAfterViewInit() {
    this.ChangeDetector.detectChanges();
}

private openPopup() {
    const modalPrompt = this.modalService.open(CommonChildModalComponent, {windowClass: 'modal-prompt fade-in-down'});
    modalPrompt.componentInstance.title = 'Title';
    modalPrompt.componentInstance.contentTemplate = this.templateToLoad;
    modalPrompt.componentInstance.originContext = this;
    modalPrompt.componentInstance.description = 'ABC';

Run Code Online (Sandbox Code Playgroud)

父HTML

<ng-template #templateToLoad>
  <div class="someClass">This data will be shown on Popup without any error.
  </div>
</ng-template>

Run Code Online (Sandbox Code Playgroud)

CommonChildPopup组件

@Input() title?: string;
@Input() description?: string;
@Input() originContext: any;
@Input() contentTemplate?: any;

constructor(public …

Run Code Online (Sandbox Code Playgroud)

modal-dialog bootstrap-modal viewchild angular

Aak*_*mar

2018 03-15

5
推荐指数

3
解决办法

4841
查看次数

CSS不承认"Avenir Next"作为我的字体系列

我正在使用CSS作为我的标题,其中所有菜单应该是"Avenir Next"字体系列.但它没有认识到它.它显示为简单的Arial.

我的代码是:

#main .Header .mainnav ul {
  float: left;
  list-style: none;
  margin: -17px 0 0;
  padding: 0;
  font-family: Avenir Next !important;
  font-size: 14px; 
}

Run Code Online (Sandbox Code Playgroud)

html css

Aak*_*mar

2014 05-20

3
推荐指数

1
解决办法

3万
查看次数

如何在组件方法中在Angular 4中进行同步调用

我有一个Angular 4登录应用程序.我已经在login.cmponent.ts文件中编写了访问逻辑并访问了我的login.service.ts文件,该文件又调用了一个身份验证服务.

当我从登录组件调用authenticate方法时,它返回false.当它执行剩余代码时,身份验证服务返回true,因为我们以异步方式知道Angular运行代码.

这是我的代码:

登录组件方法:

this.loginService.setLoginData(
    new LoginModel( this.userId, this.bankId, this.password )
  ).checkIfLoginSuccessfull();

Run Code Online (Sandbox Code Playgroud)

this.authService
  .attemptAuth(credentials);

Run Code Online (Sandbox Code Playgroud)

验证服务方法:

attemptAuth(credentials): void {

  this.restService
    .post('/authenticate', credentials)
    .subscribe(
    data => this.setAuth(data.token),
    err => this.destroy());

}

Run Code Online (Sandbox Code Playgroud)

代码工作正常.但是我想在执行checkIfLoginSuccessfull()的那一刻得到结果.我知道我没有做或调用方法(Observables正确).

请帮忙.:)

typescript angularjs-directive angular2-observables angular

Aak*_*mar

2017 11-05

3
推荐指数

1
解决办法

1万
查看次数

将Angular应用程序升级到Bootstrap 4.0.0

如何将现有的angular应用程序升级到Bootstrap版本4.0.0。

我知道这很容易，但是我正在寻找适当的升级过程而不会遇到很多问题，因为我看到很多Bootstrap 4.0.0稳定错误的堆栈溢出。

谢谢，

angular-ui-bootstrap bootstrap-4 angular

Aak*_*mar

2018 03-29

3
推荐指数

1
解决办法

3471
查看次数

在 mouseleave 事件上关闭 daterangepicker

我在我的应用程序中使用 daterangepicker 库。我想触发 daterangepicker 的内部方法 .hide() 一旦使用离开 daterangepicker 容器区域。我的代码看起来像这样。

<body class="visual-sandbox">
   <div class="visual-rangepicker">
      <div id="reportrange" class="report-range">
          <div class="calendar-icon">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
          </div>&nbsp;
          <span></span> <b class="caret caret-dropdown"></b>
        </div>
   </div>
</body>

$("#reportrange").daterangepicker(
        {
          startDate: start,
          endDate: end,
          opens: 'left',
          ranges: {
            // new Date(2017, 11, 1)
            Today: [moment(new Date()), moment(new Date())],
            Yesterday: [
              moment(new Date()).subtract(1, "days"),
              moment(new Date()).subtract(1, "days")
            ],
            "Last 7 Days": [moment(new Date()).subtract(6, "days"), moment(new Date())],
            "Last 30 Days": [moment(new Date()).subtract(29, "days"), moment(new Date())],
            "This Month": [moment(new Date()).startOf("month"), …

Run Code Online (Sandbox Code Playgroud)

javascript jquery daterangepicker

Aak*_*mar

2019 05-17

0
推荐指数

1
解决办法

2436
查看次数

表格未在Angular 8中提交

当我的Cookie可用时，我正在通过代码提交表单。但是表格没有提交。请查看代码。相同的代码在Angular 7中也有效。

我所做的一些更改是@ViewChild新语法。请查看代码：

的HTML

<form id="frmRender" [formGroup]="ssrsFromGroup" #frmRender [action]="ssrsReportUrl" method="post" target="embedFrame" (ngSubmit)="submitForm();">
  <INPUT type="hidden" name="rs:Command" value="Render">
  <INPUT type="hidden" name="rs:Embed" value="true">
  <INPUT type="hidden" name="rc:LinkTarget" value="main">
  <INPUT type="hidden" name="rs:Format" value="HTML4.0">

</form>

<iframe [hidden]="!cookiePresent" title="SSRS" class="ssrs-height" id="embedFrame" name="embedFrame" [src]="ssrsReportUrl" fxFlexFill></iframe>

Run Code Online (Sandbox Code Playgroud)

组件代码

    @ViewChild('frmRender', { static: false }) frmRenderEl: ElementRef;
    ssrsFromGroup = new FormGroup({});

Run Code Online (Sandbox Code Playgroud)

内ngOnInit（）或AfterViewInit（）

 ngOnInit() {
    this.params.ssrsReportName = 'PatientsReviewReport';
    this.ssrsUrl = '';

    this.ssrsReportUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.ssrsUrl);
    this.generateCookie();

  }


private generateCookie() {
    this.service.iFramePathService(this.params).pipe(first()).subscribe((response) => {
      this.ssrsUrl = response.ssrsEmbeddedUrl;
      this.ssrsReportUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.ssrsUrl);
      console.log('this.frmRenderEl', this.frmRenderEl);
      this.frmRenderEl.nativeElement.submit();
      this.setCookies(response.cookieValue);
      this.cookiePresent …

Run Code Online (Sandbox Code Playgroud)

iframe angular angular-reactive-forms

Aak*_*mar

2019 10-22

0
推荐指数

1
解决办法

68
查看次数