Angular: 一个mat-form-field里面有两个FormControl

Question

我有一个 mat-form-field，里面有一个 mat-select。这按预期工作。 mat-form-field 与 appearance="outline" 对应。现在我想在轮廓内添加第二个组件 apm-lock，显示用于锁定或解锁的图标。

<mat-form-field class='block' appearance="outline">
      <mat-label i18n>Anlagenbetreiber Objektgruppe</mat-label>
      <mat-select multiple formControlName="value" required>
        <mat-option>
          <ngx-mat-select-search apmSelectSearchFilter [formControl]="plantOperatorObjectFilterCtrl"
            [data]="filteredplantOperatorsObject" [fields]="['firstname', 'lastname', 'email']">
          </ngx-mat-select-search>
        </mat-option>
        <mat-option *ngFor="let user of filteredplantOperatorsObject | async" [value]="user._id">
          {{user.firstname}} {{user.lastname}} ({{user.email}})</mat-option>
      </mat-select>

      <apm-lock formControlName="locked"></apm-lock>
    </mat-form-field>

我可以看到锁并单击它，这会更改锁的状态，但也会打开 mat-select。当我单击图标时，如何确保 select 不会打开？

此外，图标显示在mat-select下方。我怎样才能在mat-select的右边显示这个？

编辑：

在 mat-select 之前（重要，但不知道为什么......）放置 apm-lock 并向其添加 matSuffix 之后，锁出现在 [=14= 后面].

<mat-form-field class='block' appearance="outline">
      <mat-label i18n>Anlagenbetreiber Objektgruppe</mat-label>

      <apm-lock matSuffix formControlName="locked"></apm-lock>

      <mat-select multiple formControlName="value" required>
        <mat-option>
          <ngx-mat-select-search apmSelectSearchFilter [formControl]="plantOperatorObjectFilterCtrl"
            [data]="filteredplantOperatorsObject" [fields]="['firstname', 'lastname', 'email']">
          </ngx-mat-select-search>
        </mat-option>
        <mat-option *ngFor="let user of filteredplantOperatorsObject | async" [value]="user._id">
          {{user.firstname}} {{user.lastname}} ({{user.email}})</mat-option>
      </mat-select>
    </mat-form-field>

现在唯一的问题是，select 在单击组件时打开。我怎样才能避免这种情况？

Answer 1

如@archelite 所述，我可以在 apm-lock 上使用 (click)="$event.stopPropagation()" 解决此问题。

<mat-form-field class='block' appearance="outline">
      <mat-label i18n>Anlagenverantwortlicher</mat-label>

      <apm-lock matSuffix formControlName="locked" matTooltip="Für Import sperren" (click)="$event.stopPropagation()"></apm-lock>

      <mat-select multiple formControlName="value">
        <mat-option>
          <ngx-mat-select-search apmSelectSearchFilter [formControl]="plantResponsibleFilterCtrl"
            [data]="filteredplantResponsibles" [fields]="['firstname', 'lastname', 'email']">
          </ngx-mat-select-search>
        </mat-option>
        <mat-option *ngFor="let user of filteredplantResponsibles | async" [value]="user._id">
          {{user.firstname}} {{user.lastname}} ({{user.email}})</mat-option>
      </mat-select>
    </mat-form-field>