fullpage. js динамически добавлять слайды, используя * ngFor - PullRequest
Новая
       12

fullpage. js динамически добавлять слайды, используя * ngFor

0 голосов
/ 13 февраля 2020

Я пытаюсь динамически создавать новые горизонтальные слайды, используя * ngFor в angular.

Что касается этой проблемы , я скачал и установил последнюю версию полной страницы из 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, и что мои функции извлечения работают как положено.

1 Ответ

0 голосов
/ 14 февраля 2020

Мне не хватало подписки. Спасибо @Paul за ответ.

Добавление: 

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

Исправлена ​​проблема. Работает только на последней версии полной страницы. js. В противном случае слайды накладываются друг на друга. Если у кого-нибудь есть какие-либо предложения или более эффективные способы сделать это, пожалуйста, дайте мне знать.

...