Необходимо активировать обнаружение изменений в приложении Angular - PullRequest
0 голосов
/ 14 апреля 2020

Я создаю элемент аккордеона, и в этот элемент аккордеона я могу добавить новые списки, которые также являются элементами аккордеона. Как только этот новый список будет создан, мне нужно, чтобы новый список был расширен. У меня проблема с обнаружением изменений, и я новичок в Angular, так что извините, если это очевидно. Прямо сейчас, если я создам новый список, назовем его «Список 1», он не расширяется. Но если я потом создам «Список 2», «Список 1» расширится. Я пытаюсь вызвать DetectChanges с ChangeDetectorRef, но безуспешно. Я также попытался markForCheck () без удачи. Я подтвердил, что вновь созданный список связан и возвращается, как и ожидалось; это просто не расширяется, когда я этого хочу. Любое руководство?

openAddChecklist() {
    let config = new MatDialogConfig<CardVM>();
    config.data = this.card;
    config.width = '800px';
    config.height = '350px';


    config.viewContainerRef = this.viewContainerRef;

    let dialogRef = this.matDialog.open(CreatechecklistComponent, config);
    dialogRef.afterClosed().subscribe((d: TaskListVM) => {
      this.openChecklist =  this._verifyType(d);
      this.findPanel('Checklists')
      this.expanded(this.openChecklist);
      // this.cdr.detectChanges(); <-- I tried calling it here as well with no success
    })
    this.cdr.detectChanges();

  }

  expanded(checklist: TaskListVM) {
    checklist.isExpanded = true;
    this.checklistService.manageExpanded(checklist, true);
  }

1 Ответ

0 голосов
/ 15 апреля 2020

В большинстве случаев обнаружение изменений реализовано внутри ngOnChanges (). Это часть жизненного цикла. Подробнее об этом здесь: https://angular.io/api/core/OnChanges

В вашем случае попробуйте реализовать этот интерфейс и попытаться обнаружить изменения внутри него, вот так. Имейте в виду, что это отразится на данном компоненте (в случае ниже детектор изменений обнаружит изменения в MyComponent):

class MyComponent implements OnChanges {
  constructor(private changeDetection: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges) {
      this.changeDetection.detectChanges();
    // use console.log(changes) to see if changes are detected
  }
}
...