* ngIf在角度对象中绑定到对象属性时如何影响性能?

我有一个模板,该模板在我的日程表组件中多次使用,并显示事件数据。在此模板中,我想显示一些图标,这些图标代表事件是否为私有,只读等。

在当前的实现中,我通过绑定到对象属性的“ * ngIf”实现了这一点。

<ng-template #mEventTemplate let-activity="activity">
  <div class="template-wrap d-flex flex-column">
    <div class="d-flex justify-content-between" style="font-size: 10px">
      <span>{{activity[this.fields.startTime.name] | getTimeString}} - {{activity[this.fields.endTime.name] | getTimeString}}</span>
      <div>
        <i class="fa fa-lock ml-1" *ngIf="activity['isPrivate']"></i></i>
      </div>
    </div>
    <span>{{activity[this.fields.subject.name]}}</span>
  </div>
</ng-template>

My problem is that when using more of those icons with *ngIf-s the performance drastically decreases when I am dragging events around the schedule. Even more so if I'm holding any of my keyboard keys (ctrl for example to copy event when drop is triggered). If I remove the whole <ng-template></ng-template> or just *ngIf elements the dragging becomes smooth.

我在这里可以做些什么吗?还是这条路要走?

评论
  • 回家吃饭
    回家吃饭 回复

    您是否正在使用OnPush更改检测?这将确保您可以控制何时运行更改检测。

    @Component({
      selector: 'app-my-component',
      templateUrl: './my-component.html',
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class MyComponent {
      constructor(private changeDetector: ChangeDetectorRef) {
      }
    
      method(): void {
        // do stuff here
    
        // not tell Angular you want it to chack for changes
        this.changeDetector.detectChanges();
      }
    }
    

    我怀疑针对对象检查ngIf与针对简单值进行检查是否有任何区别-最终,这只是一个JavaScript“真实的”评估。