В общем, как заполнить XML-данные webAPI в компоненте автозаполнения материала и как выбрать имя, но ТОЛЬКО отправить его ПК обратно

Question

Как получить Фильтр автозаполнения материала для фильтрации с помощью webAPI. В документации в примере данные жестко закодированы в виде массива:

https://material.angular.io/components/autocomplete/examples

это пример компонента документации, которую я пытаюсь заставить работать:

@Component({
  selector: 'autocomplete-filter-example',
  templateUrl: 'autocomplete-filter-example.html',
  styleUrls: ['autocomplete-filter-example.css'],
})
export class AutocompleteFilterExample implements OnInit {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

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

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

Я застрял на той части, где возвращаются данные фильтра:

 return this.options.filter(option => option.toLowerCase().includes(filterValue));

в примере варианта жестко закодирован как массив строк:

 options: string[] = ['One', 'Two', 'Three'];

Мои данные поступают из API:

  getTeamTask() {
    return this.http.get<any>(this.baseUrl+'tTaskTeams');
  }

И я пытаюсь понять это так:

return this.service.getTeamTask().filter(option=> option.toLowerCase().includes(filterValue));

Параметр фильтра продолжает выдавать эту ошибку: Свойство 'filter' не существует для типа 'Observable'.ts (23

Что, я думаю, связано с тем, как я получаю свои данные.

это пример моего XML из моего API: Этот XML-файл не имеет никакой информации о стиле, связанной с ним. Дерево документов показано ниже.

<ArrayOftTaskTeam xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/ReportingWebAPI">
<tTaskTeam>
<TeamName>GLS - GEEPE all</TeamName>
<isReport>true</isReport>
<pk_TaskTeam>1</pk_TaskTeam>
<sequence>42</sequence>
<tTasks/>
</tTaskTeam>

Как мне заставить его отображать только TeamName, и как только элемент выбран в поле автозаполнения, как мне заставить его отослать PK обратно? Я тоже запутался в этом понятии.

Answer 1

http.get()

возвращает наблюдаемое. Поэтому твой код:

this.service.getTeamTask()

возвращает наблюдаемое, поэтому вам нужно подписаться на него, а не просто вызывать .filter напрямую. Как то так:

this.service.getTeamTask().pipe( 
     map(options => options.filter(option=> option.toLowerCase().includes(filterValue))
 )
 .subscribe( results => console.log('Filtered options:', results))