Автозаполнение Материал угловой в Угловой 7

Question

Я пытался реализовать другие параметры в моем автозаполнении, используя Material Angular, как показано на этой ссылке: https://material.angular.io/components/autocomplete/overview#option-groups

Пойдем, у меня первый класс

export interface Country {
 letter: string;
 countries: string[];
 name: string[];
 flags: string[];
}

иУ меня есть служба, где get страны autocomplete.service

getCoutries() {
 return this.paises = [
  {
    letter: 'A',
      countries: [
        { ddi: +56, name: 'Alabama', flags: 'images/flag1.png' },
        { ddi: +56, name 'Alaska', flags: 'images/flag1.png' },
        { ddi: +56, name 'Arizona', flags: 'images/flag1.png' },
        { ddi: +56, name 'Arkansas', flags: 'images/flag1.png'}
      ]
  },
  // { letter: 'B', countries: ['Brasil', 'Bulgaria', 'Bolívia'] },
  // { letter: 'C', countries: ['California', 'Colorado', 'Connecticut'] },
  // { letter: 'D', countries: ['Delaware'] },
  // { letter: 'F', countries: ['Florida'] },
 ];
}

И мой компонент следующий код

import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';


export const _filter = (opt: string[], value: string): string[] => {
  const filterValue = value.toLowerCase();
  return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0);
};

@Component({
...
})
export class Component implements OnInit {

CountryGroups: Country[];
CountryGroupOptions: Observable<Country[]>;

pegarPaises() {
 this.stateGroups = this.autocompleteService.getCoutries();
}


filtrar() {
  this.stateGroupOptions = this.dataForm.get('nu_ddi')!.valueChanges
   .pipe(
     startWith(''),
     map(value => this._filterGroup(value))
  );
}


private _filterGroup(value: string): Country[] {
  if (value) {
  return this.stateGroups
    .map(group => ({letter: group.letter, countries: _filter(group.countries, value)}))
    .filter(group => group.countries.length > 0);
 }
  return this.stateGroups;
}

и мой автозаполнение HTML

 <mat-form-field>
        <input type="text" matInput placeholder="DDI" formControlName="nu_ddi" required [matAutocomplete]="autoGroup">
          <mat-autocomplete #autoGroup="matAutocomplete">
            <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
              <mat-option *ngFor="let name of group.countries.name" [value]="name">
                {{ name }}
              </mat-option>
          </mat-optgroup>
        </mat-autocomplete>
 </mat-form-field>

в автоселектепо умолчанию есть только 2 поля и буквы, поэтому его работа, но когда я хочу использовать больше полей, не работает