Angular6 + автозаполнение комплексного поиска по отделу и электронной почте

Question

Привет, ребята. У меня есть два источника данных - список сотрудников и отделов.Я хочу использовать отделы в качестве источника данных поиска, найти название отдела и выполнить автозаполнение поиска, используя название отдела и адрес электронной почты из списка сотрудников (используя отдел в качестве поиска для получения названий отделов).

private departments: any[] = [
    { id: 1, name: 'department1' },
    { id: 2, name: 'department2' },
    { id: 3, name: 'department3' }
    { id: 4, name: 'department4' },
    { id: 5, name: 'department5' },
    { id: 6, name: 'department6' }
  ];

private employees: any[] = {
    {
      name: 'employee1',
      department: [2, 3, 4],
      email: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com' 
   ]
 }
}

Я пробовал это с помощью угловогоавтозаполнение amterial, но я могу выполнить его только на объекте, который я сделал вручную:

stateGroups: StateGroup[] = [{
   name:"employee1",
   grouping:[{
    label: 'email',
    names: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com' 
   ]
   },
   {
    label: 'Department',
    names: ['department2', 'department3', 'department4']
   }]
 }];

полный код здесь:

HTML:

<form [formGroup]="stateForm">
  <mat-form-field>
    <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup">
      <mat-autocomplete #autoGroup="matAutocomplete">
        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.label">
          <mat-option *ngFor="let name of group.names" [value]="name">
            {{name}}
          </mat-option>
      </mat-optgroup>
    </mat-autocomplete>
  </mat-form-field>
</form>

TS:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';

export interface StateGroup {
  name:string,
  grouping: {label:string; names: string[]}[]
}

export const _filter = (opt: string[], value: string): string[] => {
  const filterValue = value.toLowerCase();

  return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0);
};

@Component({
  selector: 'autocomplete-optgroup-example',
  templateUrl: './autocomplete-optgroup-example.html',
  styleUrls: ['./autocomplete-optgroup-example.css'],
})

export class AutocompleteOptgroupExample implements OnInit {
  stateForm: FormGroup = this.fb.group({
    stateGroup: '',
  });

  stateGroups: StateGroup[] = [{
    name:"employee1",
    grouping:[{
      label: 'email',
      names: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com'
      ]
    },
      {
        label: 'Department',
        names: ['department1', 'department2', 'department3']
      }]
  }];

  private employees: any[] = [
    {
      name: 'employee1',
      department: [2, 3, 4],
      mail: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com'
      ]
    }
  ];

  private departments: any[] = [
    { id: 1, name: 'department1' },
    { id: 2, name: 'department2' },
    { id: 3, name: 'department3' },
    { id: 4, name: 'department4' },
    { id: 5, name: 'department5' },
    { id: 6, name: 'department6' },
    { id: 8, name: 'department7' },
    { id: 9, name: 'department8' },
  ];
  stateGroupOptions: Observable<StateGroup[]>;

  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filterGroup(value))
      );
  }

  private _filterGroup(value: string): any[] {
    if (value) {
      return this.stateGroups[0].grouping
        .map(group => ({label: group.label, names: _filter(group.names, value)}))
        .filter(group => group.names.length > 0);
    }

    return this.stateGroups[0].grouping;
  }
}

и ссылка на документацию по угловым материалам:

https://stackblitz.com/angular/lkmkopngdny?file=app%2Fautocomplete-optgroup-example.ts

У кого-нибудь есть идеи, как динамически выполнять автозаполнение поиска по электронной почте и по отделу?Я создал объект stateGroups вручную, но я хочу сделать что-то подобное, используя источники данных отдела и сотрудников (вызывайте их с помощью getEmployees () и getDepartment ()).