Событие щелчка панели расширения угловых материалов - PullRequest
Новая
       7

Событие щелчка панели расширения угловых материалов

0 голосов
/ 02 ноября 2018 

<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, например, (click) = "streetOneValue = ''"

Однако, когда я нажимаю кнопку X, чтобы очистить определенное значение, событие getPrimaryAddress () запускается снова и просто повторно заполняет данные в элементе. Есть ли способ остановить запуск функции getPrimaryAddress () при выборе других событий щелчка?

Мне нужны данные для отложенной загрузки, поэтому я обрабатываю их в событии щелчка, а не OnInit

1 Ответ

0 голосов
/ 02 ноября 2018

Вы можете выполнить загрузку в событии opened, которое вы уже используете. Тогда вам не нужно использовать событие click, и это также более правильно. Из того, что я понимаю, вы хотите загрузить данные, когда панель расширяется. Также можно использовать еще одно событие afterExpand.

Вы получаете событие click на панели, когда нажимаете кнопку, потому что кнопки являются дочерними элементами панели, и вы обрабатываете click также в элементе панели, поэтому оба получают событие. Также любой щелчок мышью внутри панели вызовет другую загрузку, которую я не думаю, что вы хотите. Вот почему лучше использовать определенные события, предоставляемые компонентами материала.

...