Автозаполнение для более чем одного поля показывает одинаковые параметры во всех полях

Question

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

Мне нужно иметь два поля ввода с возможностью поиска. Я следовал примеру, приведенному на официальном сайте, но он работает только для одного поля. Если у меня есть 2 поля, я получаю одинаковые параметры в обоих полях. Вот ссылка на мой код:

Ссылка на мой код

Было бы здорово, если бы кто-нибудь взглянул на это и дал мне знать, где я иду не так.

Заранее спасибо.

Answer 1

Похоже, что экспорт matAutocomplete = "auto" происходит дважды. Быстрое решение состоит в том, чтобы изменить один на группу, а другой на единственное число:

<form class="example-form">
<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="autoGroup">
    <mat-autocomplete #autoGroup="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

<br>
<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick name" aria-label="Number" matInput [formControl]="namesControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredNames | async" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Answer 2

Это потому, что вы ссылаетесь на auto дважды. Измените один из них, например, уведомление auto1

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick name" aria-label="Name" matInput [formControl]="namesControl" [matAutocomplete]="auto1">
    <mat-autocomplete #auto1="matAutocomplete">
        <mat-option *ngFor="let option of filteredNames | async" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Вот ответвление вашего стекаблица