                        课程
                    
                        /前端开发
                        
                            /Angular
                        
                        /AngularJS实战

angular2如何知道*ngFor什么时候渲染结束?求老师解惑

import { Component, OnInit } from '@angular/core';
import { Swiper } from '../../../server/declares';
@Component({
  selector: 'app-swiper-adv-1',
  templateUrl: './swiper-adv-1.component.html',
  styleUrls: ['./swiper-adv-1.component.css']
})
export class SwiperAdv1Component implements OnInit {
  bannerSwiper: any;
  items: any = [];
  constructor() {
    
  }

  ngOnChanges(){
    console.log('change');
  }

  _init(){
    this.items.push({
      title: '',
      image: 'http://img.chwlsq.com/1/config/1701151154381248736.jpg'
    });
    this.items.push({
      title: '',
      image: 'http://img.chwlsq.com/1/config/1701151154528930188.jpg'
    });
  }

  ngOnInit() {
    this._init();

    setTimeout(()=>{
      this._init();
    },3000);
    
    this.bannerSwiper = new Swiper('.banner-swiper .list-guanggaowei', {
        loop: true,
        speed: 1000,
        autoplay: 2000,
        autoplayDisableOnInteraction: false,
        pagination: '.banner-swiper .swiper-pagination'
    });
  }

}

Meepo校园联盟

2017-03-30

源自：AngularJS实战 1-1

关注问题我要回答

3479

操作

收起

1 回答

Meepo校园联盟提问者
2017-03-31

import { Component, OnInit } from '@angular/core';
import { Swiper } from '../../../server/declares';
@Component({
  selector: 'app-swiper-adv-1',
  templateUrl: './swiper-adv-1.component.html',
  styleUrls: ['./swiper-adv-1.component.css']
})
export class SwiperAdv1Component implements OnInit {
  bannerSwiper: any;
  items: any = [{
      title: '',
      image: 'http://img.chwlsq.com/1/config/1701151154381248736.jpg'
    },{
      title: '',
      image: 'http://img.chwlsq.com/1/config/1701151154528930188.jpg'
    },{
      title: '',
      image: 'http://img.chwlsq.com/1/config/1701151154528930188.jpg'
    },{
      title: '',
      image: 'http://img.chwlsq.com/1/config/1701151154528930188.jpg'
    }];
  _index: number = 0;
  constructor() {
    
  }

  getLast(last){
    this._index ++;
    console.log('last is'+this._index,last);
  }

  ngOnChanges(){
    console.log('change');
  }

  ngOnInit() {
    let last = false;
    if(last){
      this.bannerSwiper = new Swiper('.banner-swiper .list-guanggaowei', {
          loop: true,
          speed: 1000,
          autoplay: 2000,
          autoplayDisableOnInteraction: false,
          pagination: '.banner-swiper .swiper-pagination'
      });
    }
  }

}

<div class="indexBox">
    <section class="container banner-swiper">
        <div class="list-guanggaowei">
            <div class="swiper-wrapper">
                <div class="swiper-slide" *ngFor="let item of items;index as i;last as isLast;">
                    <img [src]="item.image">
                    <span *ngIf="getLast(isLast)">{{i}}</span>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>
    <div class="water">
        <div class="water-c">
            <div class="water-1"></div>
            <div class="water-2"></div>
        </div>
    </div>
</div>