forms - 为什么自动建议菜单会将所选项目添加到多个输入中？

Question

我正在使用 Angular Materials 处理 Angular 应用程序。我有一个奇怪的情况，其中有两个垂直对齐的输入字段，当我单击一个并从弹出的自动建议菜单中选择一个选项时，它希望将所选项目添加到两个输入：

我发现我可以通过在它们之间添加一个 mat-slide-toggle 来解决这个问题：

但我不应该这样做（而且我不想这样做）。

如果我将 mat-slide-toggle css 设置为display: noneor ，此修复程序将停止工作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>

有人知道为什么会发生这种情况以及我能做些什么吗？

标签： formsinputangular-materialautosuggest