Assigning JSON response to mat-autocomplete

Question

I have an auto-complete that works with the options variable in the component below, but I can't get it to point to the JSON object this.posts There is a field in this.posts called artistName that I'm trying to return as a list an autocomplete. If I try to assign the this.posts to

  <mat-option *ngFor="let option of this.posts| async" [value]="option">
                {{option}}
              </mat-option>

it's not allowed. I don't understand how to get my results from the JSON response to appear in autocomplete. I realize that this.posts is an object and I'm looking for the specific field artistName, but I guess I can't figure out how to wire it up correctly. I appreciate any help

sample input and return (arti is typed value)

     arti
     [ { _id: 5e20c5a139a92512cc7df63c, artistName: 'artist' },   {
         _id: 5e2350c7f88cfb331c4f67de, artistName: 'artist1' } ]

component

  import {
  Component,
  HostListener,
  OnDestroy,
  OnInit,
  Input,
  AfterViewInit
} from "@angular/core";
import { AuthService } from "../auth.service";
import { Router } from "@angular/router";
import { SearchService } from "./search.service";
import { DeviceDetectorService } from "ngx-device-detector";
import { Subject } from "rxjs";
import { takeUntil, startWith, map } from "rxjs/operators";

import { Store } from "@ngrx/store";
import { Observable } from "rxjs";
import { SubmitListingService } from "../submit-listing/submit-auction.service";
import { Listing } from "../submit-listing/listing.model";
import { FormControl } from "@angular/forms";

interface AppState {
  message: string;
}
@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"]
})
export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
  message: string;
  destroy = new Subject();
  userIsAuthenticated = false;
  searchField: string;
  posts: Listing[] = [];
  mobile: boolean;
  userId: string;
  test: string;
  isValid = false;
  message$: Observable<string>;
  timeout: any = null;
  isOpen = false;
  myControl = new FormControl();
  options: string[] = ["One", "Two", "Three"];
  filteredOptions: Observable<string[]>;

  constructor(
    private authService: AuthService,
    private searchService: SearchService,
    public router: Router,
    private mobileDetect: DeviceDetectorService,
    private store: Store<AppState>,
    private submitListingService: SubmitListingService
  ) {
    this.message$ = this.store.select("message");
  }

  click() {
    if (!this.isOpen) {
      this.store.dispatch({ type: "true" });
      this.isOpen = true;
    } else if (this.isOpen) {
      this.store.dispatch({ type: "false" });
      this.isOpen = false;
    }
  }

  onLogout() {
    this.authService.logout();
  }

  hideLogoutButton() {
    if (
      (this.userIsAuthenticated &&
        !this.mobile &&
        this.router.url !== "/listings") ||
      (this.userIsAuthenticated &&
        !this.mobile &&
        this.router.url === "/listings")
    ) {
      return true;
    } else {
      return false;
    }
  }
  ngAfterViewInit() {}

  ngOnInit() {
    this.mobile = this.mobileDetect.isMobile();
    this.userId = this.authService.getUserId();
    this.test = this.router.url;
    this.userIsAuthenticated = this.authService.getIsAuth();
    this.authService
      .getAuthStatusListener()
      .pipe(takeUntil(this.destroy))
      .subscribe(isAuthenticated => {
        this.userIsAuthenticated = isAuthenticated;
      });

    this.searchService.currentMessage
      .pipe(takeUntil(this.destroy))
      .subscribe(message => (this.message = message));

    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(""),
      map(value => this._filter(value))
    );

    console.log(this.filteredOptions);
  }
  private onKeySearch(event: any) {
    clearTimeout(this.timeout);
    var $this = this;
    this.timeout = setTimeout(function() {
      if (event.keyCode !== 13) {
        $this.executeListing(event.target.value);
      }
    }, 1000);
  }

  private executeListing(artistName: string) {
    if (artistName.length > 3) {
      //  alert(artistName);
      this.submitListingService.getArtistId(artistName).subscribe(res => {
        console.log("res");
        console.log(res);
        this.posts = res.posts;
        console.log(this.posts);
      });
    }
  }
  ngOnDestroy() {
    this.destroy.next();
    this.destroy.complete();
  }
  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(
      option => option.toLowerCase().indexOf(filterValue) === 0
    );
  }
}

html

   <form class="example-form">
          <mat-form-field class="searchField" [ngStyle]="{'font-size.px': 12}" appearance="outline">
            <mat-label id="placeholder">Find Artist</mat-label>
            <input type="text" placeholder="Pick one" name="artistName" aria-label="Number" matInput
              [formControl]="myControl" (keyup)="onKeySearch($event)" [matAutocomplete]="auto">
            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
              <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                {{option}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>

Answer 1

You can not access this operator in .html file .

Replace ,

<mat-option *ngFor="let option of this.posts| async" [value]="option">
                {{option}}
              </mat-option>

By

<mat-option *ngFor="let option of posts| async" [value]="option"> //remove this from this.posts
                {{option}} //Here option will the object from the Array posts , therefore you need to provide like {{option.key}} here key will be any key of value you want to display.
              </mat-option>

If

posts = [ { _id: 5e20c5a139a92512cc7df63c, artistName: 'artist' },   {
         _id: 5e2350c7f88cfb331c4f67de, artistName: 'artist1' } ]

Then

<mat-option *ngFor="let option of posts" [value]="option"> //remove this from this.posts
                    {{option.artistName}}
                  </mat-option>