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

角材料扩展面板单击事件

2 个答案: