Проблемы с подпиской на Angular 6 с помощью команды jQuery / javascript

Question

У меня есть служба HTTP, которая извлекает данные.В моем компоненте я подписываюсь на это.

ngOnInit() {
    this.product = this.route.snapshot.data['product'];
    this.sectionService.getAll(this.product.id).subscribe( sections => {
      this.sections = sections;
    });
  }

и у меня есть цикл ngFor в компоненте HTML, который будет создавать div для каждого элемента.

<div class="col-md-9">      
   <div *ngFor="let section of sections" id="editor{{ section.id }}" contenteditable="true">
      {{ section.content }}
    </div>
    <!-- WYSIWYG -->
</div>

Теперь мне нужно запуститькоманда javascript на каждом из этих div для включения редактора.

this.sections.forEach(element => {
    const editor = CKEDITOR.inline('editor' + element.id);
});

Если я пытаюсь добавить строку javascript в функцию подписки или функцию ngAfterViewInit (), она просто не работает.

Если я пытаюсь создать статический массив в ngOnInit (), а затем добавить свой код JavaScript в ngAfterViewInit (), это работает.

 ngOnInit() {
     this.product = this.route.snapshot.data['product'];
     this.sections = [ new Section(1, 'Hello', '<h1>test</h1>')];
 }

 ngAfterViewInit() {
    const editor = CKEDITOR.inline('editor1');
 }

Как я могу сделать эту работу для подписок?

Answer 1

Если вы запустите его в подписке, возможно, страница не инициализирована.Если вы запустите его в ngAfterViewInit, HTTP-запрос может быть не выполнен.Чтобы убедиться, что оба готовы сделать это:

sections = []

ngOnInit() {
  this.product = this.route.snapshot.data['product'];
  this.sectionService.getAll(this.product.id).subscribe( sections => {
    this.sections = sections;
  });
}

ngAfterViewInit() {

  const interval = setInterval(() => {
    if (this.sections.length) {
      this.sections.forEach(element => {
        const editor = CKEDITOR.inline('editor' + element.id);
      });
      clearInterval(interval); // stop further executions of this code
    }
  }, 100) // check if sections are ready every 100ms
}

Answer 2

Если вы добавляете свой javascript внутри подписки, вам нужно избавиться от жирной стрелки и вернуться к обычному объявлению функции внутри подписки и посмотреть, работает ли он.

this.sectionService.getAll(this.product.id).subscribe(function(sections){
  this.sections = sections;
  this.sections.forEach(element => {
    const editor = CKEDITOR.inline('editor' + element.id);
  });
});