угловой запрос на получение от пользователя

Question

ОБНОВЛЕНИЕ: мой HTML-шаблон:

 <input type="text" (keyup)="onNameKeyUp($event)">
 <button (click)="getOneWord()">Get Profile</button>
 <span>{{translation}}</span>

ц.компонент:

onNameKeyUp(event: any){
this.spelling= event.target.value;    

Я впадаю в отчаяние, так что, надеюсь, кто-нибудь меня расклеит!Мне удалось отправить запрос на получение от угловой службы на экспресс-сервер.Сервер отвечает данными.Моя проблема в том, что я не могу отобразить данные, возвращенные сервером в угловом компоненте.

это мой веб-сервис:

  getWord(name: string): Observable<Word> {
  return this.http.get<Word>('http://localhost:3000/api/words/' + name);
 }

Затем я внедряю этот сервис в компонент,вызывая его:

getOneWord(){
this.webService.getWord(this.spelling)
.subscribe(res =>
 console.log(res));

Однако, либо отображаются все данные, либо их нет.Я хочу, чтобы, если пользователь ищет / вводит «aman», будет возвращен только первый объект.

данные:

var words=[
{spelling: "aman", category: "noun", translation: "water"},
{spelling: "azzel", category: "verb", translation: "run"},
{spelling: "aberkan", category: "adjective", translation: "black"},
{spelling: "gar", category: "preposition", translation: "between"}];

Answer 1

Начальная точка

Часть A

getWord(name: string):      Observable<Word> { return this.http.get<Word>('http://localhost:3000/api/words/' + name); }

1. Ваш API должен вернуть элемент, который соответствует слову, но вместо этого вы получаете все слово обратно.с этой стороны, кажется, есть ошибка
2. , вам нужно обновить службу, чтобы ожидать массив слов, а не одно слово

Обновить это

getWord(name: string): Observable<Word[]> { return this.http.get<Word[]>('http://localhost:3000/api/words/' + name); }

Часть B

, если вы все еще получаете массив слов назад.

1) объявите глобальную переменную

theWord;

2)

getOneWord(){ this.webService.getWord(this.spelling) .subscribe((res: Word[]) => { this.theWord = res.find(d => d.spelling === this.spelling )}  );

если ваш API был исправлен

вы, вероятно, должны получить слово обратно.

  getOneWord(){ this.webService.getWord(this.spelling) .subscribe(res => console.log(res));

Answer 2

Есть миллион способов сделать это, но я собираюсь порекомендовать вам несколько лучших советов о том, что вы должны сделать, а затем предоставьте дополнительную информацию о том, почему вы должны следовать этому, а не какой-то особый подход.

1. Используйте асинхронный канал

   • Он будет действовать как «подписка» на шаблон вашего компонента (html).Есть несколько причин использовать это для ручной подписки и установки локальной переменной самостоятельно.Канал async автоматически отменит подписку при уничтожении шаблона.Не позволяйте использовать takeUntil + subject + ngOnDestroy (как показано и говорилось о здесь )

2. Непосредственно назначьте наблюдаемое из вашего сервиса компонентусвойство, которое будет передано асинхронному каналу.Это убирает все лишние переменные и более или менее напрямую «подключает» ваш наблюдаемый канал от вашего сервиса к шаблону.

// component-code
// the property we will 
public word$: Observable<Array<Word>>;

ngOnInit() {
  // the dollar sign after the variable is a convention to denote its an "observable"
  this.words$ = this.getWords()
}
private getWord(word: string): Observable<Word | undefined> {
  // the service method returns the list of words, or data
  return this.wordService.getWord(word)
    // we will use the map operator to take the list of words (which you said 
    // are returned in the "data"?
    .pipe(map((dat) => data.find((dataWord) => dataWord.spelling === word);
}

Используйте синтаксис as и else:

• Если вы делаете асинхронный запрос к бэкэнду, что вы хотите показать пользователю, когда он «возвращается» ?.Большую часть времени вы хотите показать какой-нибудь загрузочный счетчик или что-то, чтобы предупредить пользователя о том, что происходит.
• Вам не нужно использовать синтаксис as в приведенном ниже примере, но если вы хотите вызвать функцию для объекта, то теперь вы можете передать его.В противном случае вы можете создать свойство для компонента

<!--component template-->
<div *ngIf="word$ | async as word; else showSpinner">
  {{word}}
</div>
<!-- this MUST be an ng-template to work with the ngIf-->
<ng-template #showSpinner>
  <div class="spinner"> </div>
</ng-template>