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

Question

当我在下拉列表中选择第一个选项时，该选项不会反映在该字段中。 When I select the second option then first option value appears and when selects third the second option value appears.关于我的代码中的问题有什么建议吗？

这仅在 iOS 设备上发生。它在 Android 和桌面上运行良好。

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>