Question

更新：我的html模板：

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

ts。组件：

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); }

您的API应该返回与单词匹配的项目，但是您将返回整个单词。为此似乎有一个错误
您需要更新服务以期望单词数组而不是单个单词

更新此

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

有上百万种方法可以做到这一点，但是我将为您推荐一些最佳实践，然后提供关于为什么应遵循此方法的更多信息，而不是一些自定义方法。

使用async pipe
- 它将像组件模板（html）上的“订阅”一样。有很多原因要使用此选项，而不是手动订阅并自行设置局部变量。模板销毁后，async管道将自动退订。禁止您使用takeUntil +一个主题+ ngOnDestroy（已见过here）
将服务中的可观察对象直接分配给将传递给异步管道的组件属性。这样可以消除所有额外的变量，并且或多或少直接将“可观察管道”从服务中“连接”到模板。

// 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>

来自用户输入的角度获取请求

2 个答案: