Question

是否只有在鼠标离开选择下拉菜单时才触发选择更改？使用下面的示例，当我使用“多个”并且用户检查一个选项时，每次选择后我都会立即收到更改事件。

ListView1.Items.Clear();

此外，当我使用typ, msg_ids = self.imap.uid('search', None, 'SUBJECT "Report #160496147 : "AU report QTD date wise MediaOps" from Dhruv Sapra"')时，行为相同。我也试着听<mat-form-field> <mat-select placeholder="Toppings" (change)=onChange($event) multiple> <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option> </mat-select> </mat-form-field>，这次我每次选择都会收到2个事件。

我需要的是用户可以进行多个选择，但是我只会在他做出所有选择后再听（例如，鼠标离开后关闭选择下拉列表）。

Answer 1

您可以绑定到在选择面板切换时触发的openedChange事件：

<mat-form-field>
    <mat-select placeholder="Toppings"
        (openedChange)="panelChange($event)" multiple>
        <mat-option *ngFor="let topping of toppingList" [value]="topping"
            {{topping}}
        </mat-option>
    </mat-select>
</mat-form-field>

panelChange(panelOpen: boolean) {
    if (!panelOpen) {
        // Panel was closed - now handle the user's selected options
    }
}

Answer 2

如果我正确理解您的要求：

您可以使用(mouseover)和(mouseout)

<mat-form-field>
  <mat-select placeholder="Toppings" (mouseover)="onMouseMove(true)" (mouseout)="onMouseMove(false)" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

TS代码：

onMouseMove(event) {
    console.log(event)  // true false
    // if true then the mouse is on control and false when you leave the mouse
}

StackBlitz Example

多项选择仅在鼠标离开后才能更改

2 个答案: