[英]Mat-Autocomplete multiple fields
我正在使用Mat-Autocomplete,但是由于某些原因,它仅在我使用1字段时有效,当我添加另一个字段时,会发生一些奇怪的事情。
在字段1和字段2中,我在下拉菜单中都获得了相同的选项,这些选项是仅当我编辑字段2时才可用的选项。
甚至可能有多个字段,我从没有看到有关此事的任何示例。
FIELD1
<div class="col input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Sender</span>
</div>
<mat-form-field>
<input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[sender]" [ngModelOptions]="{standalone: true}">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let document of documents" [value]="document._source.field.Sender">
<span>{{document._source.field.Sender}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
FIELD2
<div class="col input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Receiver</span>
</div>
<mat-form-field>
<input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[receiver]" [ngModelOptions]="{standalone: true}" >
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let document of documents" [value]="document._source.field.Receiver">
<span>{{document._source.field.Receiver}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
这两个自动完成功能具有相同的名称auto
,它们需要具有不同的名称:
<input matInput [matAutocomplete]="auto1"...
<mat-autocomplete #auto1=...
...
<input matInput [matAutocomplete]="auto2"...
<mat-autocomplete #auto2=...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.