Mat-autocomplete Error When Using Formarray

I added a formarray to account for multiple rows. In order to make it work with the index I had to change my definition from : shoppingCartList Observable; to shopping

Solution 1:

Firstly, the reason you are seeing the error you are seeing is because of the way you've typed your list.

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

You've told the compiler here that the type of your shopping cart list is an array of multiple arrays of observables.

So, the error missing the following properties from type 'Observable<any[]>[]': length, pop, push, concat is just telling you that what you are saying getFilteredList will return is not actually what the function is expecting to return -- it's expecting to return an observable of an array (of any type).

It isn't anything to do with using a service to filter a list. I am also a bit unsure by what you mean when you refer to using a form array to account for multiple rows in this context.

With that in mind - here's what I think you are aiming for based on your question.

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

  form = newFormGroup({
    shoppingListSearch: newFormControl()
  });

Access it like this:

getshoppingListSearch(): FormControl {
    returnthis.form.get('shoppingListSearch') asFormControl;
  }

FormControls expose their value changes as an observable, handily called valueChanges. You already are on the right track in your attempt!

Rather than manually subscribing to observables, I would use Angular's templates for this. It manages the tidying up of subscriptions for you on destroy of the component. If you manually subscribe to observables as you have done above, and don't unsubscribe, you will leave subscriptions lying around, leading to memory leaks.

Define an observable like so:

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)
    )
  );

Here's the template:

<formclass="example-form" [formGroup]="form"><mat-form-fieldappearance="fill"><mat-label>Search...</mat-label><inputclass="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>

Here's the StackBlitz.

Solution 2:

If i see your code correctly you subscribe to the observable. Therefore you don't get the Array values in the template but the subscription. You should remove the subscribe method to get the template working, or you save the value inse the subscribe method and use it withou observables. I don't fully understand what you want to do with the "filteredList" in your example but you can wrap the code inside a tap operator https://rxjs.dev/api/operators/tap