javascript - Angular2+ 组件加载时 ngFor 整个 DOM 闪烁

当用户点击一个项目时，它会将该项目添加到列表中。为了渲染列表，我使用了 ngFor。在用户将第一个项目添加到所选列表后，整个屏幕/DOM 会闪烁（所有内容消失然后重新出现）。当用户接着向所选数组中添加第二个元素时，这种情况不会发生。

这是我的 ngFor 循环：

<div
  *ngFor="let sel of selected"
    class="cw-selected-list-item"
 >
 <div class="cw-selected-name t4">{{ sel.id }}</div>
   <app-checkbox class="cw-selected-r-tick"></app-checkbox>
   <app-checkbox class="cw-selected-rw-tick"></app-checkbox>
 </div>

当我注释掉我的 app-checkbox 组件时，闪烁就不会出现。下面是我的 app-checkbox 组件

TS

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
@Component({
 selector: "app-checkbox",
 templateUrl: "./checkbox.component.html",
 styleUrls: ["./checkbox.component.scss"],
})
export class CheckboxComponent implements OnInit {
 @Input() checked = false;
 @Output() checkChanged = new EventEmitter();

constructor() {}

ngOnInit(): void {}

toggleChecked() {
  this.checked = !this.checked;
  this.checkChanged.emit(this.checked);
 }
}

HTML

<div
 class="checkbox clickable"
 [ngClass]="{ 'checkbox-active': this.checked }"
 (click)="toggleChecked()"
>
<img
 class="checkbox-image"
 [ngStyle]="{ opacity: !this.checked ? 0 : 1 }"
 src="assets/buttons/tick.png"
/>

任何帮助都将不胜感激

编辑

当用户点击时，只需调用此函数

  selected = [];

  public addToSelected(item: Document) {
   this.selected.push(item);
  }

HTML

    <div
      *ngFor="let hit of hits"
       class="aisd-hit t4"
       [ngClass]="{ 'hit-disabled': this.isAlreadySelected(hit) }"
       (click)="
          this.isAlreadySelected(hit) ? undefined : this.addToSelected(hit)
        "
     >

isAlreadySelected 函数

  isAlreadySelected(doc: Document) {
   return this.selected.includes(doc);
  }

答案＃1

我找到了！

它是通过 .woff2 文件在本地导入我的字体，这在视图初始化后创建新组件时会导致整个 DOM 刷新。

希望这能帮到某人

示例导入：

  url(/assets/fonts/opensans/mem8YaGs126MiZpBA-UFUZ0bbck.woff2)
  format("woff2");