Переменная Angular View не обновляется при использовании ViewChildren - PullRequest
Новая
       10

Переменная Angular View не обновляется при использовании ViewChildren

0 голосов
/ 26 апреля 2018

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

Позвольте мне объяснить подробно.

Мне нужно знать, длинный или короткий комментарий, с которым я имею дело. Если это долго, то я хочу показать div «SHOW MORE» или «SHOW LESS». HTML выглядит так: 

<div class="comment-container" *ngFor="let comment of displayComments">
    <div #commentTextElement>{{comment.text}}</div>
    <div class="show-more" *ngIf="comment.isLong" (click)="showMore(comment)">
        <span *ngIf="comment.showMore === true">SHOW MORE</span>
        <span *ngIf="comment.showMore === false">SHOW LESS</span>
    </div>
</div

Чтобы сделать это, мне нужно получить дескриптор длины div после проверки представления, объявив дескриптор текстового элемента следующим образом: 

@ViewChildren('commentTextElement') commentTextElements: QueryList<any>;

, а затем вызывать простую функцию для настройки div следующим образом: 

ngAfterViewChecked() {
    this.configureCommentsText();
}

Функция настройки комментариев выглядит следующим образом: 

configureCommentsText(): void {

    this.commentTextElements.forEach((item, index) => {
        if(item.nativeElement.offsetHeight > 80) {
            this.displayComments[index]['isLong'] = true;
            this.displayComments[index]['showMore'] = true;
        } else {
            this.displayComments[index]['isLong'] = false;
            this.displayComments[index]['showMore'] = false;
        }
    });
    this.cdRef.detectChanges();
}

Я вызываю detectChanges (), чтобы убедиться, что изменения, внесенные в массив displayComments, обновлены. Это все работает хорошо, и все отображается правильно.

Однако, если пользователь нажимает на show-more, вызывается функция showMore (), которая должна изменить переменную showMore на true / false в зависимости от ее текущего значения, например, так: 

showMore(comment): void {
    comment.showMore = !comment.showMore; 
    //this.cdRef.detectChanges();
}

Однако это значение comment.showMore изменяется в функции, но значение в представлении не изменяется. Это я доказал, используя несколько удачно расположенных console.logs. Я даже попробовал трюк deteChanges (), но это, похоже, не дает никакого эффекта.

Я уверен, что здесь что-то явно не так, но я новичок в этом угловатом материале. Кто-нибудь может указать мне правильное направление?

РЕДАКТИРОВАТЬ 1: Если я удаляю материал viewChildren, функция showMore () работает как положено. Так что же это такое с viewChildren, который его поднимает?

1 Ответ

0 голосов
/ 26 апреля 2018

Это, кажется, было вызвано использованием 

ngAfterViewChecked()

функция вместо 

ngAfterViewInit()

для настройки комментариев. Когда я изменил это, поведение работало как ожидалось

...