如何维护历史记录数组以使用angular存储已搜索的术语？

Question

我正在一个使用angular的项目中，我需要存储所有以前搜索过的术语（例如我的手机），并在下拉列表中将这些术语显示为历史记录，以便用户可以重新打开任何以前搜索过的细节点击手机。

请推荐我如何获得此功能或提供对任何帮助的文章的参考。

非常感谢

Answer 1

searchHistory = [];

query = '';

search() {
  // do your search then store the result
  if (!this.searchHistory.some(q => q === this.query)) {
    this.searchHistory = [...this.searchHistory, this.query];
  }
}

和模板中

<select (change)="query = $event.target.value">
  <option *ngFor="let previousQuery of searchHistory">{{previousQuery}}</option>
</select>

StackBlitz演示

https://stackblitz.com/edit/angular-ra7a3y?file=src%2Fapp%2Fapp.component.html

如果您需要将数组保留在不同页面上，则可以将其移到根目录中提供的服务中。