Как отправить асинхронные данные в RxJS Observable в раскрывающемся списке углов?

Question

Я пытаюсь перевести данные (строки), отправленные из API остальных, в раскрывающееся меню онлайн-формы.Я не могу понять, где я ошибаюсь в своем коде, так как он работал, но теперь я получаю пустые / пустые массивы.

Я пытался переключаться между многими именами массивов,и пытается сопоставить вещи, но я не могу понять смысл вещей.Я чувствую, что мне нужно, чтобы мой исходный массив строк был заполнен методом подписки, упомянутым снова, но я не уверен.

Объяснение переменной / метода:

nameService: экземпляр name-service.ts.это приводит к массиву Observable строк из API.

names: массив строк инициализируется пустым, заполняется полученными именами

nameSearch: имя formControl для элемента, который содержит отфильтрованный поиск в html и может бытьссылка в .ts.

filteredNames: наблюдаемый строковый массив для отправки в html-объект с полными именами.Я не уверен, смогу ли я обойти, пройдя через такое количество массивов, но мой код основан на угловом фильтрованном шаблоне поиска Mat-Autocomplete, найденном здесь

names(): метод getter в nameService.не принимает параметры

//In the NgOnInit:

this.nameService.names().subscribe(res => this.names= res).add( () => {
      console.log(this.names); //last place data is not null

      this.filteredNames = this.NameSearch.valueChanges.pipe(
        startWith(''),
        map(value => this._filter(value))
      )
      }
    )
//Outside NgOnInit custom _filter method, if this helps:

private _filter(value: string): string[] {
    console.log(value);
    const filterVal = value.toLowerCase();
    console.log(filterVal);
    let result = this.opts.filter(opt =>
      opt.toLowerCase().includes(filterVal)
    )
  }
//in the HTML:
    <mat-card class="item">
                    <label> Name:
            <br>
            <mat-form-field hintLabel="Pick your name or enter a new one">
              <input type="text" matInput formControlName="nameSearch" [matAutocomplete]="auto" required>
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let name of filteredNames | async" [value]="name">
                  {{ name }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
          </label>
                </mat-card>

Я хочу, чтобы в раскрывающемся списке отображался список имен, извлеченных из базы данных, но сейчас ничего не происходит.В моей трассировке ошибок, таким образом, я обнаружил, что потеря данных происходит в методе NgOnInit, где я прокомментировал код.Я попытался поместить объект this.names в функцию pipe безрезультатно.

Answer 1

Ваш <mat-option> не знает, что такое [value]="name". Можете ли вы обернуть <mat-option> в <div> и поставить *ngFor на это?

Кроме того, если вы делаете асинхронный канал на ngFor, вам не нужно делать еще один внутренний канал.

<div *ngFor="let name of filteredNames | async">
  <mat-option [value]="name">
    {{ name }}
  </mat-option>
</div>

Answer 2

Я обновил это согласно вашему ответу. Это работает? Также я заметил, что у вас есть <label>, включая все поле ввода, это правильно?

//In the NgOnInit:

this.names$ = this.nameService.names();
this.nameSearch$ = this.NameSearch.valueChanges(pipe(startWith('')));

this.filteredNames$ = combinelatest(this.names$, nameSearch$).pipe(
  (names, search)=> names.filter(name=>name.toLowerCase().includes(search.toLowerCase()))
  );


//in the HTML:
<mat-card class="item">
  <label> Name:</label>
  <br>
  <mat-form-field hintLabel="Pick your name or enter a new one">
    <input type="text" matInput formControlName="nameSearch" [matAutocomplete]="auto" required>

    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let name of filteredNames$ | async" [value]="name">
        {{ name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</mat-card>