ошибка в angular при передаче данных внутри цикла ngfor - PullRequest
Новая
       1

ошибка в angular при передаче данных внутри цикла ngfor

2 голосов
/ 16 октября 2019

почему каждый раз, когда я использую ngFor, циклы запускаются 4 раза? и как это остановить? может кто-нибудь объяснить мне, что происходит?

здесь - это небольшой образец.

Ответы [ 3 ]

2 голосов
/ 16 октября 2019

Причина, по которой метод iShouldrepeatOneTime вызывается 4 раза, связана с тем, что Angular по умолчанию ChangeDetectionStrategy . По умолчанию каждый раз, когда происходит изменение в вашем компоненте, в этом случае для каждого цикла Angular будет проверять весь ваш компонент на наличие изменений. Единственный способ для Angular узнать, изменилось ли возвращаемое значение iShouldrepeatOneTime, это вызвать его.

Так как же это обойти? На ум приходит два варианта:

  1. Использовать OnPush ChangeDetectionStrategy или
  2. Убедитесь, что вы не привязываете методы в своем шаблоне по причинам, отличным от отправителей событий. Вместо этого свяжите со свойствами.

Я остановлюсь на втором моменте. Представьте, что у вас есть свойство в вашем компоненте someValue и метод calculateSomeValue() следующим образом: 

someValue = 'foo';

calculateSomeValue(): string {
  return 'bar';
}

В вашем шаблоне наличие {{ someValue }} более эффективно, чем {{ calculateSomeValue() }}, поскольку в прежнем подходе Angularуже знает, изменилось ли значение свойства и нужно ли его обновлять в представлении. В последнем подходе Angular должен сначала вызвать метод, прежде чем он узнает, нужно ли ему обновить значение в представлении.

1 голос
/ 16 октября 2019

Здесь нет ошибок! У вас есть 4 выхода, потому что в вашем массиве 4 объекта. Если вы хотите перебрать значения по определенному полю, вы можете добавить канал :

1) добавить этот канал в конец вашего app.component 

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

@Pipe({
  name: "mymap"
})
export class ArrayMapPipe  implements PipeTransform {
  transform(array: any, field: string): any[] {
    if (!Array.isArray(array)) {
      return;
    }
    return array.filter((e: any) => e.camp2 === field);
  }
}

2) импортировать канал в app.module 

import { AppComponent, ArrayMapPipe } from './app.component';
...
declarations: [ AppComponent, HelloComponent, ArrayMapPipe ]

3) вы можете использовать его так: 

<div *ngFor="let key of array | mymap:'orange'">
    <div>
        <span class="teste">{{key | json}} </span>
    </div>
</div>
0 голосов
/ 16 октября 2019

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

<div>{{ someValue }}</div>


export class AppComponent {

  someValue;

  ngOnInit() {
    this.someValue = this.someMethod();
  }

  someMethod(){
    const someValue = 2;
    return someValue;
  }
}

Подробнее о Угловой механизм обновления DOM .

...