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);
  }
}

数据源

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 属性。这会将功能与该按钮状态绑定在一起。因此，每次呈现页面时都会调用该函数。若要仅按预期使用一次该功能，请卸下括号。

indexPath

这将仅在页面初始显示时调用一次函数。

鼠标单击事件期间不需要的组件方法执行

1 个答案: