在angular中，如何将webAPI XML数据填充到物料的自动补全组件中，如何选择名称，而只返回它的主键

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

getData(): Observable<any> {
  return this.http.get('your-webapi-url', { responseType: 'text' });
}

xmlData: string;

ngOnInit() {
  this.getData().subscribe(data => {
    this.xmlData = data;
  });
}

<input type="text" [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key">
    {{ option.name }}
  </mat-option>
</mat-autocomplete>

import { FormControl } from '@angular/forms';
import { startWith, map } from 'rxjs/operators';

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

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

private _filter(value: string): any[] {
  const filterValue = value.toLowerCase();
  // 解析XML数据并根据输入值过滤数据
  const parsedData = this.parseXML(this.xmlData);
  return parsedData.filter(option => option.name.toLowerCase().includes(filterValue));
}

private parseXML(xmlData: string): any[] {
  // 解析XML数据的逻辑，将XML数据转换为对象数组
  // 返回包含主键和名称的对象数组
}