我有一個(gè)頁面，用戶可以在其中輸入并從自動(dòng)完成中選擇一個(gè)地址。自動(dòng)完成的來源來自于使用 valueChanges 事件調(diào)用的外部 API。結(jié)果行為是基于用戶輸入的預(yù)測(cè)地址查找行為。這目前適用于這個(gè)單一的目的。<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            }),          )        )      )但是，我想允許用戶添加額外的自動(dòng)完成輸入，這將在值更改時(shí)使用/調(diào)用相同的 API。我該怎么做才能做到最好？