ElemeFE / element-angular

Element for Angular
https://element-angular.faas.ele.me
MIT License
530 stars 121 forks source link

carousel 组件在el-carousel-item异步加载时出现的BUG #105

Closed tcrow closed 6 years ago

tcrow commented 6 years ago

Issue Type:

Version & Environment:
element-angular@0.6.4 angular@5.2.9

Description:

.ts 
  banners:any = [
  ]

  constructor(public http:HttpService) {

  }

  ngOnInit() {
    let that = this
    this.http.getBanners().then(ret =>{
      that.banners = ret.data
    },err => console.info(err))
  }
.html
<el-carousel height="{{height}}px" interval="5000" arrow="always" [el-class]="'banner'" model="0">
    <el-carousel-item *ngFor="let item of banners">
      <div class="small">
        <a href="{{item.url}}" target="_blank"><img [ngStyle]="{'width':width + 'px'}" src="{{item.mobileImg}}" alt=""></a>
      </div>
    </el-carousel-item>
  </el-carousel>

页面上item因为是后台数据异步加载的设置了model=0 则会报错,不设置model=0 则第二次打开页面的时候图片不能切换(单页应用路由切换回来) tim 20180428092839

检查代码发现下面代码没有判断children为undifined的情况

/**
     * @param {?} index
     * @return {?}
     */
    ElCarousel.prototype.setActiveItem = function (index) {
        var /** @type {?} */ len = this.children.length;
        var /** @type {?} */ nextValue = index >= len ? 0 : index < 0 ? len - 1 : index;
        this.model = nextValue;
        this.subscriber.forEach(function (func) { return func(); });
        this.modelChange.emit(this.model);
    };

尝试修改了一下代码

ElCarousel.prototype.setActiveItem = function (index) {
        var /** @type {?} */ len = this.children?this.children.length:0;
        var /** @type {?} */ nextValue = index >= len ? 0 : index < 0 ? len - 1 : index;
        this.model = nextValue;
        this.subscriber.forEach(function (func) { return func(); });
        this.modelChange.emit(this.model);
    };

页面不会报错,但是图片又无法切换了

unix commented 6 years ago

v0.7.6 released.