使用 formArray 时出现 Mat-AutoComplete 错误

Question

我添加了一个表单数组来处理多行。为了使它与索引一起工作，我必须将我的定义从：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);
          }

Answer 1

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

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

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

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

这与使用服务过滤列表无关。当您提到在这种情况下使用表单数组来解释多行时，我也有点不确定您的意思。

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

  /**
   * 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;
  }

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

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

像这样定义一个可观察对象：

  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。

Answer 2

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