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