Angular - * ngIf проверяет только после нажатия на нативный элемент

Question

Я пытаюсь создать коллекцию карточек, которую можно прокручивать слева направо с помощью кнопок.Если контейнер с карточками в нем слишком большой, должна появиться кнопка, и если я нажму кнопку, то должна появиться кнопка для прокрутки влево и контейнер будет прокручен.Теперь проблема в том, что *ngIf проверяется только после того, как я нажимаю на другой элемент.

Контейнер выглядит примерно так (это должен быть список воспроизведения):

Я подумал, может быть, элемент должен быть перефокусирован, поэтому JavaScript знает: «Эй, похоже, мой scrollLeft изменился», но это не сработало.

У меня есть эти две кнопки:

<button *ngIf="showLeftScroll()" mat-icon-button class="scroll-button-left" (click)="scrollLeft()"><mat-icon>keyboard_arrow_right</mat-icon></button>
<button *ngIf="isScrollable()" mat-icon-button class="scroll-button-right" (click)="scrollRight()"><mat-icon>keyboard_arrow_right</mat-icon></button>

И методы:

isScrollable() {
  const container = this.cardContainer.nativeElement;
  const isScrollable = container.offsetWidth < container.scrollWidth;
  const isNotAtTheEnd = container.offsetWidth + container.scrollLeft !== container.scrollWidth;
  return (isScrollable && isNotAtTheEnd);
}

showLeftScroll() {
  return this.cardContainer.nativeElement.scrollLeft > 0;
}

scrollRight() {
  this.cardContainer.nativeElement.scrollLeft += 600;
  this.cardContainer.nativeElement.focus();
}

scrollLeft() {
  this.cardContainer.nativeElement.scrollLeft -= 600;
  this.cardContainer.nativeElement.focus();
}

---

Что происходит в данный момент?

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

Что должно произойти?

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

Answer 1

Для немедленного обновления директивы *ngIf вызовите ChangeDetectorRef.detectChanges() в конце методов прокрутки:

constructor(private changeDetectorRef: ChangeDetectorRef) { }

scrollRight() {
  this.cardContainer.nativeElement.scrollLeft += 600;
  this.changeDetectorRef.detectChanges();
}

scrollLeft() {
  this.cardContainer.nativeElement.scrollLeft -= 600;
  this.changeDetectorRef.detectChanges();
}