Question

我对角钢不熟悉，正在尝试使用角钢材料。具体来说，我使用的是角材料形式的autocomplete功能。

我需要有两个输入下拉字段，并提供搜索选项。我遵循了官方网站上给出的示例，但是它仅适用于单个字段。如果我有2个字段，则两个字段中的选项相同。这是我的代码的链接：

如果有人可以看看并告诉我我要去哪里错，那将是很棒的事情。

谢谢。

Answer 1

这是因为您两次引用auto。更改em之一，例如，注意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>

这是您的stackblitz的叉子

Answer 2

好像正在两次执行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>

多个字段的自动完成功能在所有字段中显示相同的选项

2 个答案: