Angular Material 扩展面板点击事件

Angular Material Expansion panel click event

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" (click)="getPrimaryAddress()">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Primay Address
    </mat-panel-title>
    <mat-panel-description>
      {{panelOpenState ? 'Hide' : 'Display'}} Address
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 1" [(ngModel)]="streetOneValue">
      <button mat-button *ngIf="streetOneValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetOneValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>

    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 2" [(ngModel)]="streetTwoValue">
      <button mat-button *ngIf="streetTwoValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetTwoValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 3" [(ngModel)]="streetThreeValue">
      <button mat-button *ngIf="streetThreeValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetThreeValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 2" [(ngModel)]="countyValue">
      <button mat-button *ngIf="countyValue " matSuffix mat-icon-button aria-label="Clear" (click)="countyValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Post Code" [(ngModel)]="postcodeValue">
      <button mat-button *ngIf="postcodeValue " matSuffix mat-icon-button aria-label="Clear" (click)="postcodeValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>

    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Country" [(ngModel)]="primaryAddresscountryValue">
      <button mat-button *ngIf="primaryAddresscountryValue " matSuffix mat-icon-button aria-label="Clear" (click)="primaryAddresscountryValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
</mat-expansion-panel>

刚开始玩 Angular Material 并且 运行 遇到了垫子扩展面板的问题。我的面板在展开时显示一系列 mat-form-field 元素。

我有几个点击事件,其中一个获取数据; (点击)="getPrimaryAddress() 一旦 X 按钮被 selected,剩下的只是清除数据,例如(点击)="streetOneValue=''"

但是,当我单击 X 按钮以清除特定值时,getPrimaryAddress() 事件再次触发并重新填充元素中的数据。无论如何,每当我 select 其他点击事件时,是否可以阻止 getPrimaryAddress() 函数触发?

我需要延迟加载数据,这就是我在点击事件而不是 OnInit 中处理它的原因

您可以在您已经在使用的 opened 事件中进行加载。那么就不用点击事件了,也比较正确。据我了解,您想在面板展开时加载数据。您还可以使用另一个 afterExpand 事件。

当您按下按钮时,您会在面板上获得 click 事件,因为按钮是面板的子元素,并且您也在面板元素中处理 click,因此两者都会收到事件.此外,面板内的任何鼠标单击都会触发另一次加载,我认为这不是您想要的。这就是为什么最好使用 material 组件提供的特定事件。

这可能有点晚,但也许它会帮助那些正在寻找通过 mat-expansion-panel 进行延迟加载(延迟渲染)的人。

"By default, the expansion panel content will be initialized even when the panel is closed. To instead defer initialization until the panel is open, the content should be provided as an ng-template:"

<mat-expansion-panel>
    <mat-expansion-panel-header>
       This is the expansion title
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        Some deferred content
    </ng-template>
</mat-expansion-panel>

来源:https://material.angular.io/components/expansion/overview