Ionic 3 Slide自动播放异常：TypeError报错求助

我之前在Ionic 3开发轮播组件时也碰到过一模一样的错误，这个TypeError: Cannot read property 'hasAttribute' of undefined通常是因为ion-slides组件在异步数据还没加载完成时就提前初始化了——当items | async还没返回任何数据的时候，ion-slides内部已经开始尝试操作DOM元素，结果找不到对应的slide节点，就抛出了这个错误。

下面是几个亲测有效的解决方案，按优先级尝试：

1. 确保数据加载完成后再渲染轮播组件 #

最简单直接的方法是用*ngIf判断异步数据是否存在，只有当数据返回后再渲染ion-slides，避免组件空初始化。修改你的模板代码如下：

<ion-slides 
  *ngIf="items | async as slidesData"
  autoplay="2000" 
  loop="true" 
  speed="500" 
  pager="true" 
  class="sliderNews"
>
  <ion-slide *ngFor="let slide of slidesData">
    <img class="card-img" [src]="slide.slideImg"/>
    <div class="card-title">
      <span class="card-title-cat" [innerHTML]="slide.title"></span>
    </div>
  </ion-slide>
</ion-slides>

这里用*ngIf="items | async as slidesData"把异步数据赋值给slidesData，同时确保只有数据存在时才渲染轮播组件，从根源上避免了空DOM操作的问题。

2. 手动初始化Slides组件（如果方案1无效） #

如果异步数据加载和组件渲染的时机还是有冲突，可以尝试在代码里手动控制轮播的初始化和自动播放：

首先在slider.ts中导入Slides并通过ViewChild获取组件：

import { Component, ViewChild, OnInit } from '@angular/core';
import { Slides } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-slider',
  templateUrl: 'slider.html'
})
export class SliderPage implements OnInit {
  @ViewChild(Slides) slides: Slides;
  items: Observable<any>;

  constructor() {
    // 这里是你获取items的逻辑（比如从API请求数据）
    // this.items = yourDataService.getSlides();
  }

  ngOnInit() {
    this.items.subscribe(slidesData => {
      // 确保有数据且DOM已渲染完成
      if (slidesData && slidesData.length > 0) {
        setTimeout(() => {
          // 手动设置轮播参数并启动自动播放
          this.slides.autoplay = 2000;
          this.slides.speed = 500;
          this.slides.loop = true;
          this.slides.pager = true;
          this.slides.startAutoplay();
        }, 300); // 加个小延迟确保DOM完全渲染
      }
    });
  }
}

同时修改模板，去掉自动播放相关的属性（因为已经在代码里手动设置了）：

<ion-slides class="sliderNews">
  <ion-slide *ngFor="let slide of items | async">
    <img class="card-img" [src]="slide.slideImg"/>
    <div class="card-title">
      <span class="card-title-cat" [innerHTML]="slide.title"></span>
    </div>
  </ion-slide>
</ion-slides>

这种方式可以更精确地控制轮播启动的时机，避免组件内部的初始化冲突。

3. 检查并更新Ionic依赖版本 #

如果上面两种方法都没解决问题，可能是你使用的Ionic 3版本存在Slides组件的bug。可以尝试更新到Ionic 3的稳定版本，比如：

npm install ionic-angular@3.9.10 --save

这个版本是Ionic 3生态中比较稳定的版本，修复了不少组件的兼容性问题。

内容的提问来源于stack exchange，提问作者Abdullah Zaher