获取多个动态添加的材质自动完成输入以在 valueChange 上调用相同的方法

Question

我有一个页面，用户可以在其中输入并从自动完成中选择一个地址。自动完成的来源来自于使用 valueChanges 事件调用的外部 API。

结果行为是基于用户输入的预测地址查找行为。这目前适用于这个单一的目的。

<mat-form-field>

      <input matInput placeholder="Search Multi" aria-label="State" [matAutocomplete]="auto" [formControl]="searchMoviesCtrl" type="text">

      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">

        <mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>

        <ng-container *ngIf="!isLoading">

          <mat-option *ngFor="let suggestion of filteredMovies" [value]="suggestion.text">

            <span><b>{{suggestion.text}}</b></span>

          </mat-option>

        </ng-container>

      </mat-autocomplete>

    </mat-form-field>

    <br>

  <ng-container *ngIf="errorMsg; else elseTemplate">

    {{errorMsg}}

  </ng-container>

  <ng-template #elseTemplate>

    <h5>Selected Value: {{searchMoviesCtrl.value}}</h5>

  </ng-template>

import { Component, OnInit } from '@angular/core';

import { FormControl } from '@angular/forms';

import { HttpClient } from '@angular/common/http';

import { Router } from '@angular/router';

import { debounceTime, tap, switchMap, finalize } from 'rxjs/operators';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  searchMoviesCtrl = new FormControl();

  filteredMovies: any;

  isLoading = false;

  errorMsg: string;

  constructor(private http: HttpClient) 

  { }

ngOnInit() {

    this.searchMoviesCtrl.valueChanges

      .pipe(

        debounceTime(500),

        tap(() => {

          this.errorMsg = "";

          this.filteredMovies = [];

          this.isLoading = true;

        }),

        switchMap(value => this.http.get("http://searchaddressapiurl?text=" + this.searchMoviesCtrl.value)

          .pipe(

            finalize(() => {

              this.isLoading = false

            }),

          )

        )

      )

但是，我想允许用户添加额外的自动完成输入，这将在值更改时使用/调用相同的 API。

我该怎么做才能做到最好？

Answer 1

我让它根据需要工作！动态添加对数据结果集使用相同 API 的附加自动完成功能。debounceTime 减少了用户输入 searchText 时的 API 调用次数。我相信您可以清理它，并且正如一位评论者所建议的那样，将 API 调用放入服务中，但无论如何它都在这里。请参阅我的问题帖子中的更新 3以获取代码！