最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using jQuery with Angular2 inside *ngif is not working - Stack Overflow

programmeradmin4浏览0评论

I have Countdown jQuery function inside my Angular2 *ngIf and it is not working. I don't have any error in my console.log, but the div is empty. It's just showing the title (h1). Here is my code: HTML

<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>

Angular2 TypeScript Component

ngOnInit() {
     this.getData().then(() => this.isDataAvailable = true); 
}
ngAfterViewInit() {
        if ($('#kodeCountdown').length) {
            var austDay = new Date();
            austDay = new Date(2017, 3, 2, 12, 10);
            jQuery('#kodeCountdown').countdown({ until: austDay });
            jQuery('#year').text(austDay.getFullYear());
        }
    }

Result: Dashboard

I have Countdown jQuery function inside my Angular2 *ngIf and it is not working. I don't have any error in my console.log, but the div is empty. It's just showing the title (h1). Here is my code: HTML

<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>

Angular2 TypeScript Component

ngOnInit() {
     this.getData().then(() => this.isDataAvailable = true); 
}
ngAfterViewInit() {
        if ($('#kodeCountdown').length) {
            var austDay = new Date();
            austDay = new Date(2017, 3, 2, 12, 10);
            jQuery('#kodeCountdown').countdown({ until: austDay });
            jQuery('#year').text(austDay.getFullYear());
        }
    }

Result: Dashboard

Share Improve this question edited Feb 4, 2017 at 4:52 Jose Carlos Santos Junior asked Feb 4, 2017 at 4:50 Jose Carlos Santos JuniorJose Carlos Santos Junior 872 silver badges8 bronze badges 2
  • not very familiar with A2 - but don't you need to reference the controller in the ngIf? eg - ngIf="sampleController.isDataAvailable".... – gavgrif Commented Feb 4, 2017 at 4:52
  • Actually I have a title inside this tag as well and It's just showing the Title (h1) and not the countdown. – Jose Carlos Santos Junior Commented Feb 4, 2017 at 4:59
Add a ment  | 

2 Answers 2

Reset to default 10

The problem is that the ngAfterViewInit method is only called once after the ponent's view has been initialized. Since the *ngIf condition hasn't been evaluated to true when ngAfterViewInit is called, your #kodeCountdown element isn't visible which means that your countdown function isn't initialized.

One way to resolve this would be to execute that logic inside of the ngAfterViewChecked method (instead of the ngAfterViewInit method ), because then your code will be executed after *ngIf has been evaluated:

ngOnInit() {
  this.getData().then(() => this.isDataAvailable = true);
}
ngAfterViewChecked() {
  if ($('#kodeCountdown').length) {
    var austDay = new Date();
    austDay = new Date(2017, 3, 2, 12, 10);
    jQuery('#kodeCountdown').countdown({
      until: austDay
    });
    jQuery('#year').text(austDay.getFullYear());
  }
}

However, since the ngAfterViewChecked method is called after every check of the ponent's view, you will need to add additional logic to ensure that your countdown logic is only implemented once. You could simply set a flag to handle that:

private isCountdownInitialized: boolean;

// ...

ngAfterViewChecked() {
  if (!this.isCountdownInitialized && $('#kodeCountdown').length) {
    this.isCountdownInitialized = true;

    // ...
  }
}

A way around this is to set up jQuery code in a child ponent to free it of the parent's use of of ngIf restriction.

发布评论

评论列表(0)

  1. 暂无评论