Автозаполнение данных Angular MongoDB не отображается

Question

Я работаю над этим приложением, в котором пользователь может создать студента, и выбираю страну для ссылки на запись студента. В MongoDB я создал две коллекции: одну для студентов и для одной страны.

Я использую Mat-Autocomplete для выбора и фильтрации списка стран в форме для студентов. Пока автозаполнение работает и получает информацию из страновой коллекции. Единственная проблема, с которой я сталкиваюсь, это то, что страны не показывают. Я хотел бы знать, что я делаю не так?

скриншот проблемы

См. Мой код ниже.

HTML

        <input type="text" placeholder="Select Country" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let countries of filteredOptions | async" [value]="countries._id">
            {{cName}}
          </mat-option>
        </mat-autocomplete>
    </mat-form-field>

Компонент TS

listCountries: Country[] = []
filteredOptions: Observable<any[]>;
myControl = new FormControl();
filteredOptions: Observable<any[]>;

ngOnInit() {
    this.retCountries();
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

private retCountries() {
    this.countryService.getCountries().subscribe(countries =>
      {
      this.listCountries = countries;
      }, err => this.errorHandler(err, 'Failed to get Countries')
      );
  }

private _filter(value: any): any[] {
    return this.listCountries.filter(countries => {
      return countries.cName.toLowerCase().indexOf(value.toLowerCase()) > -1;
    })
  }