Angular KeyValuePie и ng для странного поведения - PullRequest
Новая
       36

Angular KeyValuePie и ng для странного поведения

0 голосов
/ 11 октября 2019

Я пытаюсь понять, что происходит в моей программе, и я действительно не понимаю. Прежде чем перейти к проблеме, для целей этого вопроса я упростил код и провел несколько тестов, чтобы убедиться, что локализовал проблему. Итак, в моем файле component.html есть фрагмент кода: 

<div *ngFor="let item of entityDetails | keyvalue">
   <div *ngIf="hasConflict(item.key)">text</div>
</div>

Как вы можете видеть, я использую *ngFor вместе с Angular KeyVauePipe, а внутри я проверяю условие с помощью *ngIf. Entity Details - это json, который я получаю через http запрос, используя Promise, и выглядит он так:

{rcn: "1912330", имя: "Барселонский суперкомпьютерный центр", vatNumber:"ESS090000099D", категория: "Исследовательская организация", категория Код: "REC"}

В component.ts, объявление: 

public entityDetails: string[] = new Array();

и получение данных: 

this.service.getEntityDetails().then(data => {
   this.entityDetails = data;
});

В методе hasConflict все, что я делаю, это распечатка: 

hasConflict(item): Boolean {
    let check: boolean = false;
    console.log("test");
    return check;
}

Когда я запускаю ее и открываю консоль, я уже вижу кучу распечаток:

printouts

но затем, когда я нажимаю в любом месте веб-сайта или использую прокрутку, они усиливаются после одного щелчка мыши:

click

послебыстрая прокрутка:

scroll

Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 11 октября 2019

Как предлагается в комментариях [@Chellappan], вы должны использовать трубу. Вызов функции внутри ngif - это то, что вызывает проблему из-за срабатывания обнаружения изменения угла. 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'hasConflict' })
export class HasConflictPipe implements PipeTransform {
 transform (value: any, type: string, ): boolean {

   console.log('test');
   return value ? true : false;
 }
}

, а затем внутри вашего шаблона 

<div *ngFor="let item of entityDetails | keyvalue">
   <div *ngIf="item.key | hasConflict">text</div>
</div>

Очевидно, вы должны поместить свою логику в hasConflict это характерно для вашего случая.

0 голосов
/ 11 октября 2019

Почему это происходит.

Это происходит потому, что вы вызываете функцию из шаблона. Поэтому каждый раз, когда запускается обнаружение изменений angular, он обновляет пользовательский интерфейс и снова вызывает функцию.

Как исправить

Вместо вызова функции из шаблона, подготовьте карту внутри подписки getEntryDetails, которую выМожно использовать непосредственно в шаблоне для проверки состояния. Например: 

conflictMap = {};

if(condition){
  conflictMap[key] = value;
}

и затем непосредственно в html: 

<div *ngFor="let item of entityDetails | keyvalue">
   <div *ngIf="conflictMap[item.key]">text</div>
</div>

Дальнейшее чтение - с использованием функции в * ngIf выполняется несколько раз вместо одного

...