Mat-select не показывает параметры: Angular 10

Интересно, что не так с моим использованием мат-выбора. Потому что он не показывает список опций:

<form>
          <mat-form-field appearance="standard">
            <mat-label>New Error Type</mat-label>
            <mat-select [(ngModel)]="selectedNewErrorCode" name="faultType">
              <mat-option *ngFor="let faultType of faultTypes" [value]="faultType.code">
                {{faultType.label}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <p>Selected error: {{selectedNewErrorCode}}</p>
 </form>

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

/** Imports animations */
import {slideInAnimation} from '../../animations';


/** Imports models */
import {StackTraceView} from '../../objects/stack-trace-view.model';
import {FaultType} from '../../objects/fault-type.model';

@Component({
  selector: 'app-consult-details',
  templateUrl: './consult-details.component.html',
  styleUrls: ['./consult-details.component.sass'],
  animations: [slideInAnimation]
})
export class ConsultDetailsComponent implements OnInit {

  constructor() {
  }

  public flux: StackTraceView;
  public modifState = false;
  /** Used in resetting the form */
  originalFlux: string;
  faultTypes: FaultType[];
  /** determines if the original error flux should be visible or not */
  public originalErrorVisible = false;

  /** Sets the new fault type for reanalysing the stack trace */
  selectedNewErrorCode: string;

  ngOnInit(): void {
  }

  modifyFlux() {
    this.modifState = !this.modifState;
  }

  sendFlux() {
    console.log(`The flux changed to ${this.flux.originalFlux}`);
  }

  /** Reste the form to its original state */
  resetForm() {
    document.getElementById('toBeReset').innerHTML = this.originalFlux;
    this.flux.originalFlux = this.originalFlux;
    this.modifState = false;
  }

  /** Sets the visibility of the original error flux to flse if it is true and vice versa */
  isOriginalErrorVisible() {
    this.originalErrorVisible = !this.originalErrorVisible;
  }
}

Весь компонент отображается в модальном режиме. Переменная faultTypes передается, когда модальное вызывается в родительском компоненте. Соответствующий код в родительском компоненте выглядит следующим образом:

    const detailsContent = this.specificReportList.filter(
      entry => entry.messageId === originalMessageId
    )[0];

    const modalRef = this.modalService.open(ConsultDetailsComponent, {
      size: 'xl',
      ariaDescribedBy: 'Details'
    });

    /** The input sata for the pop-up component */
    modalRef.componentInstance.flux = detailsContent;
    modalRef.componentInstance.originalFlux = detailsContent.originalFlux;
    modalRef.componentInstance.faultTypes = this.faultTypeList;

    modalRef.result.then((result) => {
      this.closeResult = `Close with ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }```

As a final comment the variable faulttypes is well fed in via the
parent component and when I use nromal select and option I do not have
any problem; The code works very well, the only problem is when I use
mat-select which is important for me beacuse It gives a unifrom look
and feel to my application.