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();
}