Сколько времени применяется ngStyle

Question

Я применяю цвет к элементу div и меняю цвет в цикле следующим образом

 toogleColor()

{

if(this.color=='blue')
{
  this.color="red"
  this.fontcolor='white'
  return
}else if(this.color=='red'){
  this.color='white'
  this.fontcolor='black'
  return
}else if(this.color=='white'){
  this.color='blue'
  this.fontcolor='white'
  return
}

}

, и у меня есть setStyle () функционируют следующим образом:

  setStyle(){
this.toogleColor()
return {

  'background-color':this.color,
  'height':'382px'
}

}

В моем компоненте html я связал стиль следующим образом:

<div  [ngStyle]="setStyle()"  *ngFor="let element of array1">

Но я не получаю ожидаемого цветового цикла, потому что setStyle() Функция называется 4 * номер элемента в массиве

Answer 1

Да, он будет вызываться несколько раз, так как вы использовали *ngFor, и он создаст несколько элементов div, а несколько div будут вызывать ngStyle несколько раз.

Если вы хотите позвонитьодин раз, затем вы можете обернуть его как

<div  [ngStyle]="setStyle()">
  <ng-container *ngFor="let element of array1">
     ....
  </ng-container>
</div>

Если вы хотите применить ngStyle в том же самом div и хотите повторить то же самое, тогда вы должны поместить этот setStyle в некоторую переменную, использующую его как -

public style;

ngOnInit(){
  this.style = this.setStyle(); //return the styles
}


<div  [ngStyle]="style"  *ngFor="let element of array1">

Answer 2

Давайте поговорим о нескольких вещах, которые не так в вашем коде.

1. setStyle сбивает с толку метод и делает две вещи одновременно. Это действительно что-то устанавливает, но также возвращает значение. Это противоречит принципу единой ответственности, а также сбивает с толку человека, который сначала смотрит html. Поэтому, когда я вижу [ngStyle]="setStyle()", я думаю, что с этим кодом что-то не так, потому что в общем случае setter ничего не возвращает.
2. Вы вызываете метод из html, который приводит к непредсказуемому поведению, подобному тому, которое у вас есть сейчас. Это связано с тем, что в Angular эта концепция называется Обнаружение изменений Если вы еще не слышали об этом, вам следует прочитать об этом. Короче говоря, всякий раз, когда происходит событие (щелчок пользователя, запрос xhr и т. Д.), Angular просматривает ваш html и ваш компонент, чтобы определить, изменилось ли что-то. При этом, если в вашем html-файле есть метод, angular вызовет его, чтобы получить значение результата для выполнения некоторых проверок, которые могут быть хорошими в некоторых случаях, если вызываемый метод не делает ничего сверхсложного и завершается очень быстро. Однако в вашем случае он что-то делает, он меняет цвет.

Итак, что мы можем сделать?

Нам нужно разделить логику установки цветов и получения цветов двумя разными методами. Также, если возможно, мы должны избегать вызова методов из html.

Я думаю, что вы пытаетесь назначить разные цвета каждому элементу массива на основе цвета предыдущего элемента. Так что вы можете сделать что-то вроде следующего

@Component({
  selector: 'demo',
  template: `
    <div [ngStyle]="element.style" *ngFor="let element of array1"></div>
  `
})
export class DemoComponent implements OnInit {

  array1 = [];

  color = 'white';

  constructor() { }

  ngOnInit() {
    // get array from somewhere
    // this.array1 =

    this.array1.forEach(element => {
      const colorConfig = this.getNextColor();
      element.style = {
        'background-color': colorConfig.color,
        'height': '382px',
        'color': colorConfig.fontColor
      };
    });
  }

  getNextColor() {
    let fontColor;
    if (this.color === 'blue') {
      this.color = 'red';
      fontColor = 'white';
    } else if (this.color === 'red') {
      this.color = 'white';
      fontColor = 'black';
    } else if (this.color === 'white') {
      this.color = 'blue';
      fontColor = 'white';
    }

    return {
      color: this.color,
      fontColor: fontColor
    };
  }

}

Answer 3

В вашем случае лучше использовать ngClass вместо ngStyle, и я не думаю, что вам вообще нужно использовать функцию.

style

.blue {
color:blue;
background-color:red; // many css property 
}

.red {
color:red;
...
}

.white {
color:white
...
}

template

<div  [ngClass]="color" *ngFor="let element of array1" >

класс может иметь другое свойство, но если вы все еще меняете только цвет, вы можете использовать ngStyle

<div  [ngStyle]="{color:color}" *ngFor="let element of array1" >

демонстрация стекаблиц