Angular Material Accordion 打开外部点击问题答案

【问题标题】：Angular Material Accordion opening on outside click problemAngular Material Accordion 打开外部点击问题
【发布时间】：2021-07-31 14:59:33
【问题描述】：

我正在开发一个使用 Angular 11 和 Angular 材料的应用程序。在这个应用程序中，我实现了动态生成的角材料手风琴。在手风琴标题中，我还实现了一个下拉菜单。

问题： 问题是当我单击下拉菜单时，它会打开，但手风琴也会打开/关闭，这在技术上是不正确的。正如您在下面的图片中看到的那样；默认情况下手风琴会打开，但是当我点击下拉菜单时它会关闭，这是错误的，因为我没有点击手风琴图标。

下面是代码文件，便于理解。

app.component.html

<div class="trendFlow">
  <mat-accordion class="example-headers-align" *ngFor="let accordionData of accordianArray" multi>
    <mat-expansion-panel [expanded]="currentSensorId==accordionData.sensorId">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{accordionData.sensorName|translate}}
        </mat-panel-title>

        <!-- SAMPLE CODE STARTS -->
        <div class="dropMenu">
          <mat-form-field appearance="fill">
            <mat-label>{{currentTimeValue|translate}}</mat-label>
            <mat-select [(ngModel)]="currentTimeValue">
              <mat-option *ngFor='let property of timeProperties' 
                   (click)="handleTimeSelection(property.name)">
                {{property.name|translate}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <!-- SAMPLE CODE ENDS -->
</div>

app.component.ts

accordianArray: any = [];
currentSensorId: number = 0;
public currentTimeValue = '1 Day';
  timeProperties: any = [
    { name: '1 Hour', id: 1 },
    { name: '4 Hours', id: 1 },
    { name: '1 Day', id: 1 }
  ];

  handleTimeSelection(propertyName: string) {
    this.currentTimeValue = propertyName;
  }

有什么解决办法吗？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

这是因为您同时点击了下拉菜单和下方的手风琴。要解决这个问题，您需要停止将单击事件从按钮传播到手风琴。

在下拉点击函数上你需要传递$event，然后在函数内部你需要调用$event.stopPropagation()。

您可以在此处找到示例解决方案：Angular 2 : Stop propagation of parent element's event , when clicking on link

【讨论】：

akkonrad：我尝试使用 $event.stopPropagation()。但不知何故，它没有显示任何变化。

【解决方案2】：

<mat-select [(ngModel)]="currentTimeValue">
  <mat-option *ngFor='let property of timeProperties' 
    (click)="handleTimeSelection(property.name, $event)">
    {{property.name|translate}}
  </mat-option>
</mat-select>

  handleTimeSelection(propertyName: string, event: MouseEvent) {
    event.stopPropagation();
    this.currentTimeValue = propertyName;
  }

【讨论】：

IAfanasov：我尝试使用 $event.stopPropagation()。但不知何故，它没有显示任何变化。
意外。可能是event.preventDefault() 可以吗？

【解决方案3】：

试试这个：

  <mat-select [(ngModel)]="currentTimeValue" (click)="$event.stopPropagation()">
              <mat-option *ngFor='let property of timeProperties' 
                   (click)="handleTimeSelection(property.name)">
                {{property.name}}
              </mat-option>
  </mat-select>

查看StackBlitz

【讨论】：

Saghi Shiri：我尝试使用 $event.stopPropagation()。但不知何故，它没有显示任何变化。
我更新了答案并添加了一个示例。