Angular2 +整个DOM在组件加载ngFor上闪烁

Question

当用户单击一个项目时，它会将其添加到列表中。为了呈现我正在使用 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 组件

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

Answer 1

我找到了！

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

希望这对某人有所帮助

导入示例：

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