路线更改执行的属性更改不会更新使用* ngIf操作的视图

So I have a kind of custom select bar with products-header__select expanding the list on click. To do so I created the property expanded which is supposed to describe its current state. With *ngIf I either display it or not.

It works fine clicking the products-header__select. But a click on one of the expanded list's items changes the route, the path and some other element changes, but the products-header__select remains visible.

All good, but I want to collapse the list on route change - my approach was to listen to router events and then run expanded = false when the navigation has ended. - But somehow the view won't update and the list remains expanded, even though running console.log(this.expanded) inside of the router event returns false. Why won't it update then?

视图：

<div class="products-header__select" (click)="expanded = !expanded">
  <ul>
    <li class="basic-text__small custom-select">{{mobileCategories ? (mobileCategories[0].name | transformAllProducts) : ''}}</li>
    <div class="select-options" *ngIf="expanded">
      <li class="basic-text__small" *ngFor="let category of mobileCategories.slice(1, mobileCategories.length); let i = index" routerLink="/products/{{category.name.toLowerCase()}}">
        {{category?.name | transformAllProducts}}
      </li>
    </div>
  </ul>
</div>

expanded = false;

mobileCategories;
@Input() set categories(value) {
  if (value) {
    ...
  }
}

constructor(private router: Router) {
  router.events.subscribe((event: RouterEvent) => {
    if (event instanceof NavigationEnd) {
      this.expanded = false;
      this.url = event.url;
      this.getActiveRoute();
    }
  });
}