Я не могу получить удаленные данные из обычного URL-адреса API, но URL-адрес jsonplaceholder работает (я думаю, что они похожи на JSON API, с некоторым другим форматом JSON). Я не знаю, имеет ли привязка к данным Angular какие-то требования к формату JSON или я что-то пропустил в коде пользовательского интерфейса.
Я пытаюсь добавить функцию автозаполнения во внешний интерфейс. Результаты автозаполнения данных должны быть получены из некоторого внутреннего API. Вы можете попробовать с двумя URL-адресами API: https://jsonplaceholder.typicode.com/users работает, но http://api.plos.org/search?q=title:DNA не работает.
HTML:
<input type="text" matInput
id="customerIdInput"
(keyup.enter)="emitSearch()"
formControlName = "customerId"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"
[displayWith]="getOptionText">
<mat-option *ngFor="let option of (filteredOptions | async)"
[value]="option">
{{ option.name }}
</mat-option>
</mat-autocomplete>
Машинопись:
@Injectable({
providedIn: 'root'
})
export class Service {
constructor(private http: HttpClient) { }
opts = [];
getData() {
return this.opts.length ?
of(this.opts) :
this.http.get<any>('https://jsonplaceholder.typicode.com/users/').pipe(tap(data => this.opts = data));
}
}
@Component({
selector: .
templateUrl: .
styleUrls: .
})
export class CustomerIdComponent implements OnInit {
customerId = new FormControl();
options = [];
filteredOptions: Observable<any[]>;
constructor(private service: Service) { }
ngOnInit() {
this.filteredOptions = this.searchForm.controls['customerId'].valueChanges.pipe(
startWith(''),
debounceTime(100),
switchMap(value => value.length >= 3 ? this.doFilter(value) : [])
);
}
doFilter(value) {
return this.service.getData()
.pipe(
map(response => response.filter((option: { name: { toLowerCase: () => { indexOf: (arg0: any) => number; }; }; }) => {
return option.name.toLowerCase().indexOf(value.toLowerCase()) === 0;
}))
);
}
getOptionText(option) {
return option.name;
}
}
Я ожидал, что смогу получить удаленные данные из любого API.