Angular Material扩展面板点击事件

Question

<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-expansion-panel上遇到了问题。我的面板托管了一系列mat-form-field元素，在展开时出现。

我有几个点击事件，其中一个是获取数据的(click)="getPrimaryAddress()，其余的只是在选择X按钮后清除数据，例如(click)="streetOneValue=''"

然而，当我点击X按钮清除特定值时，getPrimaryAddress()事件再次触发，只是重新填充了元素中的数据。是否有办法阻止getPrimaryAddress()函数在选择其他点击事件时触发？

我需要延迟加载数据，这就是为什么我要处理它在一个点击事件中，而不是OnInit。

- Ross

Answer 1

您可以在已经使用的“opened”事件中进行加载。这样，您就不需要使用单击事件，并且更加正确。据我所知，您希望在面板展开时加载数据。还有另一个“afterExpand”事件也可以使用。

当您按下按钮时，面板会收到“click”事件，因为按钮是面板的子元素，并且您还在面板元素中处理“click”。此外，面板内的任何鼠标单击都会触发另一个加载，我认为这不是您想要的。这就是为什么最好使用材料组件提供的特定事件。

- Aleš Doganoc

Answer 2

这可能有点晚了，但也许能帮助一些正在寻找通过mat-expansion-panel实现懒加载（惰性渲染）的人。

“默认情况下，即使面板关闭，扩展面板内容也会被初始化。要延迟初始化直到面板打开，应该将内容提供为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

- Shawn Spencer