时间戳

首页 > 解决方案 > fullpage.js 使用 *ngFor 动态添加幻灯片

angular - fullpage.js 使用 *ngFor 动态添加幻灯片

问题描述

我正在尝试使用 *ngFor 以角度动态创建新的水平幻灯片。

关于这个问题，我已经从 GitHub 下载并安装了最新版本的 fullpage。但是，我的幻灯片没有填充。我正在尝试做的事情可能吗？

我的模板是这样的：

<div fullpage id="fullpage" [options]="config" (ref)="getRef($event)">
    <div class="section" id="introCard-id" data-anchor="top">
        <h1>my name</h1>
        <h2>something</h2>
    </div>
    <div id="aboutCard" class="section">
        <!-- <h1>About Me</h1> -->
        <div class="infoText">
            <p>stuff
            </p>
        </div>
    </div>
    <div class="section" data-anchor="experience" style="background-color:#254A79;">
        <div class="slide">
            <h2>Experience</h2>
        </div>
        <div class="slide" *ngFor="let experience of experiences | async">
            {{experience.title}}
        </div>
    </div>
    <div class="section" data-anchor="skills" style="background-color: blueviolet;">
        Skills
    </div>
    <div class="section" data-anchor="portfolio" style="background-color:orangered;">
        Portfolio
    </div>
    <div class="section" data-anchor="publications" style="background-color: black;">
        Publications
    </div>
</div>

背后的代码是：

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.scss'],
})
export class HomepageComponent implements OnInit {
  config: any;
  fullpage_api: any;
  navigation: true;
  parallax: true;
  projects: any;
  experiences: any;

  constructor(
    private projectsService: ProjectsService, 
    private experiencesService: ExperiencesService
    ) {
      this.projects = this.projectsService.fetchProjectsList();
      this.experiences = this.experiencesService.fetchExperiencesList();

      this.config = {
      licenseKey: LICENSE_KEY,
      anchors: [
        'top',
        'introduction',
        'experience',
        'skills',
        'portfolio',
        'publications'
      ],

      menu: '#menu',

      afterResize: (width, height) => {
        // $('#menu').
      },

      afterLoad: (origin, destination, direction) => {

      }
    };
  }

  ngOnInit(): void {

  }

  getRef(fullPageRef) {
    this.fullpage_api = fullPageRef;
  }
}

我确保后端包含 *ngFor 可以使用的虚拟数据，并且我的获取功能按预期工作。

标签： angularfullpage.js

解决方案

我缺少订阅。感谢@Paul 的回答。

添加：

  ngAfterViewInit() {
    this.experiences.subscribe(_ => {
      console.log('rebuild');
      this.fullpage_api.build();
    });
  }

修复了问题。仅适用于最新版本的 fullpage.js。否则，幻灯片会堆叠在一起。如果有人有任何建议或更好的方法来做到这一点，请告诉我。

推荐阅读