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>

当我注释掉我的应用程序复选框组件时，闪烁不会出现。下面是我的应用程序复选框组件

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(doc: Document) {
return this.selected.includes(doc);
}

Answer 1

我找到了！

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

希望这对某人有所帮助

导入示例：

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