fullpage.js 使用 *ngFor 动态添加幻灯片答案

【问题标题】：fullpage.js dynamically add slides using *ngForfullpage.js 使用 *ngFor 动态添加幻灯片
【发布时间】：2020-02-13 01:59:47
【问题描述】：

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

参考this issue，我已经从 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 使用的虚拟数据，并且我的获取功能按预期工作。

【问题讨论】：

您的代码中似乎有错字。 ! 中的 *ngFor!="。
抱歉，是的，如果没有它，它会失败。
我有一个沙盒示例，其中填充了幻灯片。唯一的问题是样本幻灯片（标题 1、标题 2 等）是堆叠的。我不确定这是仅限于我的示例的 CSS，还是您面临的相同问题。看看，让我知道。 codesandbox.io/s/dazzling-stallman-84x09
您确定您的服务正在返回任何内容吗？我修改了 stackblitz 以获取 observables 并且呈现正常，请参见此处stackblitz.com/edit/angular-hjqlun
您提到的问题已修复并合并到最新版本中。

标签： angular fullpage.js

【解决方案1】：

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

添加：

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

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

【讨论】：