问题描述
我正在使用 Angular Materials 处理 Angular 应用程序。我有一个奇怪的情况,有两个输入字段垂直对齐,当我单击一个并从弹出的自动建议菜单中选择一个选项时,它想将所选项目添加到两个输入中:
我发现我可以通过在它们之间添加一个 mat-slide-toggle 来解决这个问题:
但我不应该这样做(而且我不想这样做)。
如果我将 mat-slide-toggle css 设置为 display: none
或 visibility: hidden
,此修复将停止工作。它也不一定只适用于输入之间的任何元素。例如,我添加了 <div style="border: 1px solid red; width: 100%; height: 20px"></div>
但这不起作用。
我也不确定这是 Angular Materials 问题,因为我记得之前在 Vue.js 应用程序中看到过这个问题。
代码如下:
<mat-form-field>
<mat-label>Interruption Emails</mat-label>
<mat-chip-list #interruptionEmailChips fxLayout="row">
<div>
<mat-chip class="emails"
*ngFor="let interruptionEmail of interruptionEmailList"
[selectable]="true"
[removable]="true"
(removed)="removeEmail(interruptionEmailList,interruptionEmail)">
{{ interruptionEmail }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input
id="interruption-email-input"
name="interruption-email-input"
placeholder="Add email to list..."
[matChipInputFor]="interruptionEmailChips"
[matChipInputAddOnBlur]="true"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes"
(matChipInputTokenEnd)="addEmail(interruptionEmailList,'interruptionEmails',$event)"
/>
<mat-error>
<span *ngIf="formErrors.interruptionEmails"> {{ formErrors.interruptionEmails }} </span>
</mat-error>
</div>
</mat-chip-list>
</mat-form-field>
<!-- <mat-slide-toggle color="primary" name="tempEmailsEnabled"></mat-slide-toggle> -->
<mat-form-field>
<mat-label>Archive Readings File - Emails</mat-label>
<mat-chip-list #archiveReadingsFileEmailChips fxLayout="row">
<div>
<mat-chip class="emails"
*ngFor="let archiveReadingsFileEmail of archiveReadingsFileEmailList"
[selectable]="true"
[removable]="true"
(removed)="removeEmail(archiveReadingsFileEmailList,archiveReadingsFileEmail)">
{{ archiveReadingsFileEmail }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input
id="archive-readings-file-email-input"
name="archive-readings-file-email-input"
placeholder="Add email to list..."
[matChipInputFor]="archiveReadingsFileEmailChips"
[matChipInputAddOnBlur]="true"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes"
(matChipInputTokenEnd)="addEmail(archiveReadingsFileEmailList,'archiveReadingsFileEmails',$event)"
/>
<mat-error>
<span *ngIf="formErrors.archiveReadingsFileEmails"> {{ formErrors.archiveReadingsFileEmails }} </span>
</mat-error>
</div>
</mat-chip-list>
</mat-form-field>
有人知道为什么会发生这种情况以及我能做些什么吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)