mat-autocomplete选项值在IOS设备中显示不正确

Question

当我选择下拉列表中的第一个选项时，该选项不会反映在字段中。当我选择第二个选项时，第一选项值出现，当选择第三个选项时，第二选项值出现。对我的代码中的问题有什么建议吗？

这只发生在iOS devices.Its上，在安卓和台式机上运行良好。

​

emailDomains = AvailableDomains.emailDomains;

export const AvailableDomains = {
    emailDomains: [
        "hotmail.com",
        "gmail.com",
        "yahoo.com",
        "outlook.com"
    ]
}

<mat-form-field appearance="outline" class="textbox mat-form-field-invalid">
        <span class="iconError icon-alert" aria-hidden="false" aria-label="Error"></span>
        <mat-label>Email</mat-label>
        <input matInput placeholder="Enter" formControlName="email" type="email" [matAutocomplete]="emailAutoComplete" #email>
        <mat-autocomplete #emailAutoComplete="matAutocomplete" panelWidth="auto">
            <mat-option *ngFor="let emailDomain of (email.value.endsWith('@') && email.value.split('@').length == 2 ? emailDomains : [])"  [value]="email.value + emailDomain">@{{emailDomain}}
            </mat-option>
        </mat-autocomplete>
</mat-form-field>

​

Answer 1

我有一些在IOS上工作的自动补全代码。我比较了两者，我看到的不同之处在于，我在mat-autocomplete标记上使用(optionSelected)，而不是在mat-option标记上使用(onSelectionChange)。试试看。

  <mat-form-field appearance="outline" class="textbox mat-form-field-invalid">
    <span class="iconError icon-alert" aria-hidden="false" aria-label="Error"></span>
    <mat-label>Email</mat-label>
    <input matInput placeholder="Enter" formControlName="email" type="email" [matAutocomplete]="emailAutoComplete" #email>
    <mat-autocomplete #emailAutoComplete="matAutocomplete" panelWidth="auto" (optionSelected)="updateForm($event,emailDomain)">
        <mat-option *ngFor="let emailDomain of (email.value.endsWith('@') && email.value.split('@').length == 2 ? emailDomains : [])"  [value]="email.value + emailDomain">@{{emailDomain}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>