Как оптимально реализовать поиск по matAutocomplete и автозаполнение полей?

Question

[Алёна Хреновская]

Есть массив объектов выгруженный из PostgreSQL:

массив$: Observable<Array<модельModel>>;

модельModel состоит, допустим из id (number) и name(string).

Есть такое поле с автозаполнением:

<mat-form-field>
              <input matInput
                     placeholder="Номер модели"
                     formControlName="id"
                     [matAutocomplete]="auto">
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let массив of массив$ | async"
                            [value]="массив.id">
                  {{ массив.id }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>

и есть просто

<mat-input-container>
                <input matInput
                     formControlName="name"
                     placeholder="Имя модели"
                     readonly>
            </mat-input-container>

Если я делаю по примеру из https://material.angular.io поиск не работает (точнее ругается еще в ts файле, что дескать нет у модельModel никакого name).
А осуществить нужно следующее:
поиск по matAutocomplete
и автоматическую подгрузку связанного значения в input formControlName="name".

Answer 1

[Aset]

Ну если официальном примере работает, тогда все должна работат. Скорее проблема не правильно формированный массив.
Делайте все по этапу.
1. Запустите сперва пример у себя https://material.angular.io/components/autocomplet...
2. потом к нему прикрутите массив из PostgreSQL.
3. Проверяйте поиск итд

После берите значение ngModel id и поставьте в ngModel name.

Comments

[Алёна Хреновская]

ой все очень интересно))) когда добавляешь в код пример с сайта, он почему то в выпадающий список передает не новый объявленный массив, а выгруженный из базы, хотя у них абсолютно разные названия -_-
выглядит это так примерно:

<mat-form-field>
              <input matInput
                     placeholder="Номер модели"
                     formControlName="id"
                     [matAutocomplete]="auto">
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let массив of массив$ | async"
                            [value]="массив.id">
                  {{ массив.id }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>

<mat-form-field>
              <input matInput
                     placeholder="Номер модели"
                     formControlName="другоеid"
                     [matAutocomplete]="auto">
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let другойМассив of другойМассив$ | async"
                            [value]="другойМассив.id">
                  {{ другойМассив.id }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>

И вот вместо содержимого другойМассив$ выпадает массив$ ....

[Aset]

Алёна Хреновская, ого и в чем была проблема?)

[Алёна Хреновская]

Aset, Как обычно в том, что я балда. У каждого [matAutocomplete]="auto" и #auto="matAutocomplete", если их несколько на одном экране, должно быть уникальное имя.
А изначальную проблему решила тем, что выгружала из БД не Observable>, а обычный массив модельModel[]. А автоподгрузка совершается во время фильтрации массива, в шаблоне объявила [(ngModel)]="currentМодель" и типа если модель.name = currentМодель, то такие-то поля формы принимают такие-то значения, связанные с объектом массива)))