Angular2 + мерцание всего DOM при загрузке компонента ngFor - PullRequest
2 голосов
/ 17 июня 2020

Когда пользователь щелкает элемент, он добавляет его в список. Чтобы отобразить список, я использую ngFor. После того, как пользователь добавляет первый элемент в выбранный список, весь экран / DOM мерцает (все исчезает и появляется снова). Этого не происходит, когда пользователь затем добавляет второй элемент в выбранный массив

Вот мой ngFor l oop:

<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 function

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

1 Ответ

1 голос
/ 17 июня 2020

Я нашел его!

Он импортировал мои шрифты локально через файлы .woff2, что создавало полное обновление DOM sh, когда новый компонент был создан после инициализации просмотра.

Надеюсь это помогает кому-то

Пример импорта:

  url(/assets/fonts/opensans/mem8YaGs126MiZpBA-UFUZ0bbck.woff2)
  format("woff2");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...