Присвоение JSON ответа на мат-автозаполнение

Question

У меня есть автозаполнение, которое работает с переменной options в компоненте ниже, но я не могу заставить его указывать на JSON объект this.posts В this.posts есть поле с именем artistName, которое я пытаюсь вернуть как список автозаполнение. Если я пытаюсь присвоить this.posts

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

, это не разрешено. Я не понимаю, как получить результаты из ответа JSON, отображаемые в автозаполнении. Я понимаю, что this.posts является объектом, и я ищу указанное поле c artistName, но, думаю, я не могу понять, как правильно его подключить. Я ценю любую помощь

пример ввода и возврата (arti является набранным значением)

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

компонент

  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

Не ссылаться на переменную TypeScript с this в шаблоне (это неявно). Кроме того, ваше свойство posts не является Observable, поэтому вам не нужен канал async. И, наконец, ваша переменная option относится к Listing, который имеет свойства _id и artistName, поэтому вы должны правильно установить их в [value] и интерполированный отображаемый текст.

Другой детали, которые не влияют на решение (только вопрос чистоты): в своей реализации «подождите, пока пользователь прекратит печатать», используйте функцию стрелки, после чего вы можете ссылаться на this, не сохраняя ссылку на нее с помощью var $this = this;

Ваш HTML должен быть:

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

А ваша onKeySearch функция может быть:

private onKeySearch(event: any) {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
        if (event.keyCode !== 13) {
            this.executeListing(event.target.value);
        }
    }, 1000);
}

Answer 2

posts: Listing[] = []; сообщения не наблюдаются, используйте

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

Answer 3

Вы не можете получить доступ к оператору this в файле . html.

Заменить ,

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

На

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

Если

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

Тогда

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