Выполнение нежелательного метода компонента во время события щелчка мыши

Question

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

Я еще ничего специально не пробовал, так как до сих пор не знаю, как это происходит (я новичок в изучении углов, пожалуйста, потерпите меня)

HTML

<mat-grid-list cols="4" rowHeight=".85:1">
  <div *ngFor="let item of items">
    <mat-grid-tile *ngIf="item.isActive">
      <mat-card class="mat-elevation-z10 item-card">
          <mat-card-header>
            <mat-card-title>{{item.title}}</mat-card-title>
            <mat-card-subtitle>{{item.subtitle}}</mat-card-subtitle>
          </mat-card-header>
          <img mat-card-image src="{{item.icon}}" alt="{{item.name}}">
          <mat-card-content>{{item.description}}</mat-card-content>
          <mat-divider [inset]="true"></mat-divider>
          <mat-card-actions>
            <button mat-button 
            [disabled]="!isAccessible(item.name)">Action1</button>
          </mat-card-actions>
        </mat-card>
    </mat-grid-tile>
  </div>
</mat-grid-list>

КОМПОНЕНТ

export class ItemComponent implements OnInit {
  items: any;
  dataSource: ItemDataSource; //items from the back end server

  constructor(private store: Store<AppState>) { }

  ngOnInit() {
    this.items = fromConfig.ITEMS;

    this.dataSource = new ItemDataSource(this.store);
    this.dataSource.load();
  }

  isAccessible(itemName: string) {
    return this.dataSource.isAccessible(itemName);
  }
}

DataSource

export class ItemDataSource implements DataSource<Item> {

  itemSubject = new BehaviorSubject<Item[]>([]);

  constructor(private store: Store<AppState>) {  }

  isAccessible(itemName: string): boolean { 
    let exists = false;

    for (const itemSubject of this.itemSubject.value) {
      console.log('Parameter Item Name: ' + itemName + '; Subject Item Name: ' + itemSubject.name);
      if (itemSubject.name === itemName ) {
        exists = true;
        break;
      }
    }

    return exists;
  }

  connect(collectionViewer: CollectionViewer): Observable<Item[]> {
    return this.itemSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {
    this.itemSubject.complete();
  }
}

Ожидаемым результатом будет то, что метод будет выполняться только один раз во время инициализации или после обновления.

Answer 1

Вы используете квадратные скобки, чтобы связать свойство disable кнопки.Это связывает функцию с этим состоянием кнопки.Таким образом, функция вызывается каждый раз, когда страница отображается.Чтобы использовать функцию только один раз (как вы и предполагали), удалите фигурные скобки.

<button mat-button disabled="!isAccessible(item.name)">Action1</button>

Это вызовет функцию только один раз, когда страница визуализируется изначально.