Mat-Accordion игнорирует [расширенное] свойство?

Question

В моем приложении есть мат-гармошка, и я хочу, чтобы панель расширения открывалась, когда пользователь выбирает переключатель на элементе: требуемая реализация выглядит следующим образом:

У меня проблема в том, что я использую свойство [expanded] элемента mat-expansion-panel, чтобы определить, должна ли панель открываться. Выбор переключателя устанавливает «selectedProjectId», и панель должна открываться, если «selectedProjectId === project.id», но даже если я подтверждаю, что projectId и selectedProjectId установлены правильно, панель не открывается, когда это равенство true.

На следующем снимке экрана показано, где я показываю project.id и selectedProjectId для каждого проекта, но панель не открывается, даже если равенство истинно.

Обратите внимание, что selected и project и projectId идентичны, но по какой-то причине панель не раскрывается.

Вот код для соответствующей части страницы:

  <div *ngIf="projects.count == 0">You have no projects</div>

  <mat-list>
    <div *ngFor="let project of projects.list; let activeIndex = index ">
      <mat-accordion>
        <mat-expansion-panel [expanded]="selectedProjectId === project.id" [hideToggle]=true
          (mouseenter)="activate= activeIndex" (mouseleave)="activate=-1">
          <mat-expansion-panel-header>
            <div class="list-entry">
              <mat-radio-button (click)="selected(project.id)"></mat-radio-button>
              <mat-list-item>
                <mat-icon mat-list-icon>menu_book</mat-icon>
                <div mat-line>
                  {{project.projectName}}
                </div>
                <div mat-line>
                  {{project.creationDate | date}}
                </div>
                <div mat-line>
                  selected: {{selectedProjectId}} projectId: {{project.id}}
                </div>

              </mat-list-item>
              <button #open *ngIf="activate == activeIndex " mat-raised-button color="primary">Open latest</button>
              <button #new *ngIf="activate == activeIndex" mat-raised-button> New Budget</button>


            </div>
          </mat-expansion-panel-header>
          <div *ngFor="let budget of budgets.getBudgetsForProject(project.id)">

            <mat-card>
              <mat-card-header class="budget-card-header">
                <div *ngIf="!(project.projectName == budget.budgetTitle)">
                  <mat-card-title>
                    {{budget.budgetTitle}}
                  </mat-card-title>
                  <mat-card-subtitle>
                    Version {{budget.version}} {{budget.creationDate | date}}
                    <br>
                    {{budget.assumptions}}</mat-card-subtitle>
                </div>

                <div *ngIf="(project.projectName == budget.budgetTitle)">
                  <mat-card-title>
                    <small>Version {{budget.version}} {{budget.creationDate | date}}</small>
                  </mat-card-title>
                  <mat-card-subtitle>{{budget.assumptions}}</mat-card-subtitle>
                </div>
              </mat-card-header>

              <mat-card-content>
                <div>
                  Budget Total: {{budget.total | currency}}
                </div>
                <div>Last Revision: {{budget.creationDate | date}}</div>
                <div>Master Currency: {{budget.masterCurrency}}</div>
                <div>Prepared by: {{budget.preparedBy}}</div>
              </mat-card-content>
              <mat-card-actions>
                <button mat-raised-button color="primary">Open</button>
                <button mat-raised-button (click)="editBudgetDetails(budget.id)">Edit details</button>
                <button mat-button>Copy</button>
                <button mat-button>Delete</button>
                <mat-slide-toggle (change)="budgetToggleLock(budget.id, $event)">Lock Budget</mat-slide-toggle>
              </mat-card-actions>
            </mat-card>
          </div>
        </mat-expansion-panel>
      </mat-accordion>
      <mat-divider></mat-divider>
    </div>