javascript - 使用 formArray 时出现 Mat-AutoComplete 错误

Question

我添加了一个 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);
          }

Answer 1

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

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 s 将它们的值变化公开为可观察的，方便地称为 valueChanges .您的尝试已经走在正确的轨道上了!

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

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

  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 .