Ошибка при получении данных из JSON API. Что такое формат JSON для привязки данных? - PullRequest
0 голосов
/ 01 ноября 2019

Я не могу получить удаленные данные из обычного 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...