Auto Complete (id and value)

Hello, Iam implementing the mdb-auto-completer, and i want show the description of item and save the id. How i can do that ? Iam new on angular. I try in mdb-auto-completer dont work, try in mdb-option didn´t work too.

my code :

          </mdb-option>
        </mdb-auto-completer>
      </div>
    </div>

export class VerificacaoCodigoFormComponent extends BaseResourceFormComponent implements OnInit {

@ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent; searchText = ''; results: any; //data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black']; data: any = ['red']; filteredTeste: any;

optionUtilizador: Array;

constructor( protected verificacaoCodigoService: VerificacaoCodigoService, protected utilizadoresService: UtilizadoresService, protected injector: Injector ) { super(injector, new VerificacaoCodigo(), verificacaoCodigoService, VerificacaoCodigo.fromJson); // this.results = this.searchEntries(this.searchText); }

ngOnInit() { this.loadUtilizadores(); // Como ele subscreve a class BaseResourceFormComponent // e para garantir que os metodos da classe BaseResourceFormComponent, tais como buildform, pomos:

super.ngOnInit();

}

protected buildResourceForm() {

this.resourceForm = this.formBuilder.group({
  id: [null],
  codigoverificacao: ["", [Validators.required]],
  dataexpiracao: ["", [Validators.required]],
  activo: ["", [Validators.required]],
  utilizador_id: ["", [Validators.required]],
  utilizador_id2: ["", [Validators.required]],
});

}

getDataItems() { // console.log("Teste1 ",this.optionUtilizador); // console.log("Teste2 ",this.data);

return this.data;

}

searchEntries(term: string) { // console.log(" searchEntries ",this.data); // console.log(" searchEntries2 ",this.optionUtilizador); return of(this.getDataItems().filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase()))); }

getFilteredData() { // this.results = this.searchEntries(this.searchText); if (this.searchText.length > 0) { this.utilizadoresService.getAllPesquisarNome(this.searchText) .pipe( debounceTime(300) ) .subscribe(

      (utilizador: any) => {

        if (utilizador.length > 0) {
          // let listUtilizador: any[] = [];
          // utilizador.forEach(utilizador => {
          //   let option = { value: utilizador.id, label: utilizador.nomeutilizador };
          //   listUtilizador.push(option);

          // });
          // this.optionUtilizador = listUtilizador.slice();
          //this.results = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];
          this.results = utilizador;
          console.log("utilizador --- ", utilizador);
        }

      }
    );

}

}

onChange() { this.getFilteredData(); }

ngAfterViewInit() { this.completer.selectedItemChanged().subscribe((data: any) => { this.searchText = data.text; this.getFilteredData(); console.log('Selected item change', data); }); }

ngOnDestroy(): void { //Called once, before the instance is destroyed. //Add 'implements OnDestroy' to the class.

}

}