使用 formArray 时出现 Mat-AutoComplete 错误

问题描述

我添加了一个 formarray 来说明多行。为了使它与索引一起工作，我不得不将我的定义从：shoppingCartList Observable<any[]>; 更改为 shoppingCartList: Observable<any[]>[] = []; 但是当我这样做时，它会在我的过滤器函数中抛出一个错误，说 missing the following properties from type 'Observable<any[]>[]': length,pop,push,concat。看起来是因为我正在调用服务来过滤列表。实现此目的的正确方法是什么： .HTML

<mat-autocomplete #auto="matAutocomplete" [displayWith]="entry">
       <mat-option *ngFor="let case of shoppingCartList[i] | async" [value]="case">
            {{title}}
         </mat-option>
 </mat-autocomplete>

.TS

    shoppingCartList: Observable<any[]>[] = [];
            
             this.shoppingCartList[index] = arrayControl.at(index).get('name').valueChanges //ERROR: (property) DraftformComponent.filteredPrimaryCaseSerial: Observable<any[]>[]
    Type 'Subscription' is missing the following properties from type 'Observable<any[]>

                .pipe(debounceTime(this.debounceTime))
                  .subscribe(
                    (val) => {
                        this.filteredList= this.getFilteredlist(val); //ERROR: (property) DraftformComponent.filteredPrimaryCaseSerial: Observable<any[]>[]
    Type 'Observable<any[]>' is missing the following properties from type 'Observable<any[]>[]
                      }
                  );
        
         public getFilteredList(val: string): Observable<any[]> {
            return this.myService.getListByValue(val);
          }

解决方法

首先，您看到错误的原因是您输入列表的方式。

Observable<any[]>[] = [];

您已经在这里告诉编译器您的购物车列表的类型是由多个可观察对象组成的数组。

因此，错误 missing the following properties from type 'Observable<any[]>[]': length,pop,push,concat 只是告诉您，您所说的 getFilteredList 将返回的内容实际上并不是函数期望返回的——它期望返回一个 可观察的一个数组（任何类型）。

这与使用服务过滤列表无关。我也有点不确定当您提到在此上下文中使用表单数组来说明多行时的意思。

考虑到这一点 - 根据您的问题，这就是我认为您的目标。

  /**
   * Define a form which contains your FormControl you wish
   * to use for your autocomplete.
   */

  form = new FormGroup({
    shoppingListSearch: new FormControl()
  });

像这样访问它：

  get shoppingListSearch(): FormControl {
    return this.form.get('shoppingListSearch') as FormControl;
  }

FormControl 将它们的值更改公开为可观察的，方便地称为 valueChanges。您的尝试已经走在正确的轨道上！

我会为此使用 Angular 的模板，而不是手动订阅 observable。它在组件销毁时为您管理订阅的整理。如果你像上面那样手动订阅 observables，并且没有取消订阅，你会留下订阅，导致内存泄漏。

像这样定义一个 observable：

  filteredList$: Observable<
    ShoppingListItem[]
  > = this.shoppingListSearch.valueChanges.pipe(
    debounceTime(1000),// Use a switchMap here to subscribe to the inner observable.
    // This is assuming your filtering needs to make a HTTP request.
    // switchMap will maintain one inner subscription,so should you 
    // make another request while one is in flight,the in flight 
    // request will be cancelled and a new one made with your new
    // search term.  
    switchMap((searchTerm: string) =>
      // this can be whatever filtering logic you want I guess.
      // To reiterate,I used a switchMap above as getFilteredList
      // returns an observable. An operator like map or tap wouldn't 
      // work here,as they don't handle subscribing to inner observables.
      this.myService.getFilteredList(searchTerm)
    )
  );

这是模板：

<form class="example-form" [formGroup]="form">
  <mat-form-field appearance="fill">
    <mat-label>Search...</mat-label>
    <input
      class="example-full-width"
      placeholder="Search for something..."
      formControlName="shoppingListSearch"
      [matAutocomplete]="auto"
      matInput
    />
  </mat-form-field>

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="entry">
    <!-- Here is where we subscribe to the filtered list observable -->
    <mat-option *ngFor="let shoppingItem of filteredList$ | async" [value]="shoppingItem.name">
      {{shoppingItem.name}}
    </mat-option>
  </mat-autocomplete>
</form>

这是 StackBlitz。

,

如果我正确地看到了你的代码，你就订阅了 observable。因此，您不会在模板中获得 Array 值，而是在订阅中获得。您应该删除 subscribe 方法以使模板工作，或者您将值保存在 subscribe 方法中并在没有可观察的情况下使用它。 我不完全明白你想用你的例子中的“filteredList”做什么，但你可以将代码包装在一个点击运算符 https://rxjs.dev/api/operators/tap