javascript - 有没有办法将 "subscribe"更改为 Angular 中的数组变量？

Question

我正在寻找一种方法来等待用户停止交互，然后发出 HTTP 请求，为此我正在研究来自 RxJs 的 debounceTime() 运算符，但是目标我正在等待的是我定义的数组。

这是场景:

export class KeywordSelectionComponent implements OnInit {

  constructor(private proposalService: ProposalService) { }

  @ViewChild(MatTable, {static: true}) kwTable: MatTable<any>;
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @Input() proposalId: string;

  keywordInput = new FormControl(null, Validators.required);

  dataSource: MatTableDataSource<Keyword>;
  displayedColumns = ['action', 'keyword', 'searches', 'competition', 'cpc'];
  suggestedKeywords: Keyword[] = [];
  selectedKeywords: string[] = [];

  fetchSuggestions(seeds?: string[]) {
    const ideas = {
      seeds: [],
      limit: 25
    };
    this.proposalService.getKeywordIdeas(this.proposalId, ideas).pipe(retry(3)).subscribe(res => {
      this.suggestedKeywords = res;
    });
  }

}

我不会在这里包含整个组件，但想法如下:

我有一个在页面上呈现的 suggestedKeywords 列表，每个列表都应该调用 addKeyword() 方法将该关键字添加到 dataSource ，之后，我调用 fetchSuggestions() 方法来获取新关键字来填充 suggestedKeywords 列表。

当我尝试快速连续选择多个关键字时，问题就出现了，因为这会触发每次点击更新 suggestedKeywords 列表的请求，所以我想使用 debounceTime() 防止请求触发，直到用户停止单击项目一段时间；然而，据我所知，这要求 Observable 是正在变化的元素，但就我而言，它只是一个简单的数组。

是否有某种方法可以跟踪数组的值，以便它在更改后等待一段时间，然后再发出 HTTP 请求，例如 Observable？

编辑:按照评论中的建议使用from()运算符，为了实际监听更改，我是否需要定义其他方法？我在想类似于 FormControls 中的 valueChanges() 的东西。

查看更多文档后，我倾向于 Subject、BehaviorSubject 等；但我不确定这是否是正确的方法，任何人都可以提供有关如何执行此操作的示例吗？

Answer 1

将数组包装在 Observable.of() RxJS 运算符中，它将表现得像 observable