Привязка веб-API является объектным объектом в Angular

Question

Исходя из предыдущего вопроса, я использую функцию typehahead в NG-Bootstrap. Мои данные поступают из веб-API в следующем формате, который был изменен по сравнению с предыдущим форматом. Старый формат был:

result: Array(749)
[0 … 99]
0: "0000105862"
1: "0000105869"
2: "0000105875"
3: "0000110855"
4: "0000110856"
5: "0000110859"
6: "0000111068"
7: "0000111069"
8: "0000111077"
9: "0000112050"
etc

Новый формат:

{  
   "result":[  
      {  
         "graphical":{  
            "link":"https://link.com",
            "value":"82374982374987239487"
         },
         "id":{  
            "link":"https://links.com",
            "value":"39485039485039485093485093"
         },
         "serial_number":"2837492837498237498"
      },
   ]
}

У меня есть служба, которая доставляет эти данные из in, а именно:

getSerials(customerId): Observable<any> {
    return this.http.get<any>(this.serialApiUrl + "?customer_id=" + customerId)
      .pipe(
        catchError(this.handleError)
      );
  }

Затем он добавляется в component.ts следующим образом:

public si_id = [];

private getSerials() {
  this.service.getSerials(this.customer_id).subscribe((data) => {
    for (var i = 0; i < data['result'].length; i++) {
      this.si_id.push(data['result'][i]);
  }
   this.si_id.map(m => {
  });
    console.log('Data' + data);
    this.loading = false;
    console.log('Result - ', data);
    console.log('Serial data is received');
  })
}

ngOnInit() {
    this.getSerials();
    this.serviceForm = new FormGroup({
    customer_id: new FormControl(this.customer_id),
    si_id: new FormControl(this.si_id[0], Validators.required),
});
}

public model: any;

search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  map(term => term === '' ? []
    : this.si_id.filter(v => v.serial_number.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
)

Тогда в html:

<ng-template #rt let-r="result" let-t="term">
   <ngb-highlight [result]="r" [term]="t">here</ngb-highlight>
</ng-template>
<input id="si_id" type="text" placeholder="Serial number" formControlName="si_id" class="form-input"
[ngbTypeahead]="search" [resultTemplate]="rt" />

У моего Typeahead вместо данных есть объект Object.

Answer 1

В настоящее время ваш поисковый поток вернет массив подходящих объектов в this.si_id. Вам необходимо сопоставить отфильтрованные элементы со строками, которые вы хотите отобразить:

search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  map(term => term === '' 
    ? []
    : this.si_id
        .filter(v => v.serial_number.toLowerCase().indexOf(term.toLowerCase()) > -1)
        .slice(0, 10)
        .map(v => v.serial_number) // <-- the string you want to see for each result.
  )
);

Возможно, было бы намного полезнее, если вы установите тип массива при объявлении this.si_id. Большинство IDE показывают, что тип this.search будет Observable типа this.si_id, и это облегчит обнаружение проблемы, поскольку вы знаете, что вам нужен поток строк, а не объектов.