Angular 12.2.7 Mat-Select Dropdown Not Updating

Question

My app can display a specific reading routed through URL parameters. When it does this, the selectedReadingId variable is assigned, but the reading dropdown shows up as blank, even though selectedReadingId is bound to the mat-select dropdown. How can I force the dropdown to update?

When I go the page with no params, the dropdown is properly set. I have tried using ChangeDetectorRef and similar methods of forcing angular to update.

        <mat-form-field appearance="fill" style="display: inline-block;" id="reading-select-field">
            <mat-label>Reading</mat-label>
            <mat-select (selectionChange)="handleReadingSelect($event)" [(ngModel)]="selectedReadingId" name="reading">
                <mat-option *ngFor="let reading of readingDropdownOptions" [value]="reading.id">
                    {{reading.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>

  // UI State
  patientDropdownOptions = [] as any
  readingDropdownOptions = [] as any
  lateralityDropdownOptions = [
    { value: "LEFT_ARM" },
    { value: "RIGHT_ARM" },
    { value: "BILATERAL" },
  ];
  derivativeDropdownOptions = [
    { value: 0, viewValue: "Raw Data" },
    { value: 1, viewValue: "1st Derivative" },
    { value: 2, viewValue: "2nd Derivative" },
    // { value: 3, viewValue: "Normalize" }
  ];
  
  // Data Storage
  readings = [] as Reading[]
  patientIds = [] as number[]

  selectedPatientId: number | undefined;
  selectedReadingId: number | undefined;
  selectedLaterality: string | undefined = "BILATERAL";
  selectedDerivative: number | undefined = 0;

  ngOnInit() {
    this.subscriptions.push(
      // Assign selectedReadingId and selectedLaterality if there are params
      this.route.queryParams.pipe(
        tap(params => {
          this.selectedReadingId = params['reading_id'] || undefined;
          this.selectedLaterality = params['laterality'] || "BILATERAL";
        }),
        // Get the patientIds, update the patient dropdown, set a default selectedPatientId
        concatMap(() => this.readingService.getAllReadings()),
        tap(readings => {
          this.patientIds = [...new Set(readings.map(reading => reading.userId))];
          this.patientDropdownOptions = this.patientIds.map((patientId) => ({
            id: patientId,
            viewValue: `Patient ${patientId}`
          }));
          this.patientIds.length > 0 
            ? this.selectedPatientId = this.patientIds[0] 
            : this.selectedPatientId = undefined;
        }),
        // If selectedReadingId is defined, update selectedPatientId to the reading's userId
        concatMap(() => 
          this.selectedReadingId
          ? this.readingService.getReadingById(this.selectedReadingId) 
          : of(null)
        ),
        tap(reading => {
          reading 
          ? this.selectedPatientId = reading.userId 
          : null
        }),
        // If patientId is defined, fetch all of their readings and assign a default readingId
        concatMap(() => 
          this.selectedPatientId
          ? this.readingService.getReadingsByPatientId(this.selectedPatientId) 
          : of([])
        ),
        tap(readings => {
          this.readings = readings;
          this.readingDropdownOptions = this.readings.reverse().map((reading) => ({
            id: reading.id,
            viewValue: `ID: ${reading.id} Date Created: ${reading.date_created}`
          }));
          if (!this.selectedReadingId && this.readings) {
            this.selectedReadingId = this.readingDropdownOptions[0].id
          }
          this.fetchAndGraphData();
        })
      ).subscribe({
        error: error => console.error('Error in ngOnInit:', error)
      })
    );
  }