Question

已尝试使用Material Angular在我的自动完成功能中实现其他参数，如以下链接所示： https://material.angular.io/components/autocomplete/overview#option-groups

走吧，我先上课

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

我在某国家/地区提供服务 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个字段和字母，因此它可以工作，但是当我想使用更多字段时，则不起作用

角度7中的自动完成材料角度

0 个答案: