angular - Angular Material Accordion 打开外部点击问题

Question

我正在开发一个使用 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;
  }

请问有什么解决办法吗？

标签： angularangular-material

Answer 1

<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;
  }