fullpage.js使用* ngFor]动态添加幻灯片>

问题描述 投票:0回答:1

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

[参考this issue,我已经从GitHub下载并安装了完整版的最新版本。但是,我的幻灯片没有填充。我想做的是可能的吗?

我的模板是这样的:

<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来动态创建新的水平幻灯片。关于此问题,我已经从GitHub下载并安装了完整版的最新版本。但是,我的幻灯片...

angular fullpage.js
1个回答
0
投票

我没有订阅。感谢@Paul的回答。

© www.soinside.com 2019 - 2024. All rights reserved.