Angular5中如何让Angular2-materialize轮播图在获取数据后加载

看起来你遇到的问题主要有两个核心点：一是异步数据未返回时，async管道会让*ngFor遍历空值导致轮播显示空白；二是Materialize的轮播组件是基于DOM初始化的，数据更新后旧的轮播实例不会自动适配新内容。下面给你分步解决的方案：

1. 条件渲染：避免轮播提前显示空内容 #

首先我们要确保只有当数据加载完成后，才渲染轮播组件，同时把异步数据暂存到一个变量里方便后续使用。修改你的视图代码：

<!-- 用*ngIf等待数据加载完成，同时把异步数据赋值给winesList -->
<div *ngIf="(Wines | async) as winesList" 
     #wineCarousel 
     materialize="carousel" 
     [materializeParams]="[{padding: 150}]" 
     class="carousel center">
  <a *ngFor="let wine of winesList" 
     class="modal-trigger carousel-item wine" 
     (tap)="openModal()">
    <img src="assets/images/vinho.png">
    <h2>{{wine.name}}</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
  </a>
</div>
<!-- 可选：添加加载提示，给用户明确的反馈 -->
<div *ngIf="!(Wines | async)" class="loading">加载中...</div>

这样修改后，轮播只会在Wines Observable发出有效数据后才会渲染，彻底避免了空内容的问题。

2. 重新初始化Materialize轮播 #

Materialize的轮播组件是在DOM首次加载时初始化的，当我们切换分类更新数据后，DOM结构发生了变化，但旧的轮播实例不会自动识别新内容。我们需要在数据更新后手动销毁旧实例并重新初始化。

修改你的组件代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { WineService } from './wine.service';

// 声明Materialize全局变量，确保能调用其API
declare var Materialize: any;

@Component({
  selector: 'app-wines',
  templateUrl: './wines.component.html',
  styleUrls: ['./wines.component.css']
})
export class WinesComponent implements OnInit {
  public Wines;
  @ViewChild('wineCarousel') wineCarousel: ElementRef;

  constructor(
    private route: ActivatedRoute,
    private _dataService: WineService
  ) { }

  ngOnInit() {
    this.Wines = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => 
        this._dataService.getWine(+params.get('id'))
      )
    );

    // 订阅数据变化，重新初始化轮播
    this.Wines.subscribe(winesList => {
      // 用setTimeout确保DOM已经更新完成
      setTimeout(() => {
        // 先销毁旧的轮播实例（如果存在）
        if (this.wineCarousel?.nativeElement?.M_Carousel) {
          this.wineCarousel.nativeElement.M_Carousel.destroy();
        }
        // 重新初始化轮播
        Materialize.Carousel.init(this.wineCarousel.nativeElement, {padding: 150});
      }, 0);
    });
  }
}

关键点解释： #

• @ViewChild('wineCarousel')：获取轮播DOM元素的引用，方便我们操作Materialize的轮播实例。
• setTimeout：确保我们在DOM更新完成后再初始化轮播，避免新数据还没渲染到DOM上就执行初始化。
• 销毁旧实例：防止多次初始化导致的轮播功能异常。

这样修改后，切换分类时轮播会等待数据加载完成才显示，并且数据更新后会自动重新适配新内容，不会再出现先空后加载的问题。

内容的提问来源于stack exchange，提问作者Patric Pippi