Angular Material Expansion 面板点击事件

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 中处理它

Answer 1

您可以在已使用的opened事件中进行加载。 然后，您无需使用click事件，它也更加正确。 据我了解，您想在面板展开时加载数据。 您还可以使用另一个afterExpand事件。

当您按下按钮时，您会在面板上获得click事件，因为按钮是面板的子元素，并且您还要在面板元素中处理click ，因此两者都可以接收该事件。 同样，在面板内单击任何鼠标都将触发另一个加载，我认为这不是您想要的。 这就是为什么最好使用材料组件提供的特定事件的原因。

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