NgClass вызывает метод несколько раз
Я создал метод и прикрепил его к ngClass для добавления двух стилей в зависимости от условия. Я также передаю число в качестве параметра, который будет использоваться в случае переключения.
компонент.html
<div class = "circle" [ngClass] = "setMyClassesCircle(1)">
<div class = "circle" [ngClass] = "setMyClassesCircle(2)">
<div class = "circle" [ngClass] = "setMyClassesCircle(3)">
<div class = "circle" [ngClass] = "setMyClassesCircle(4)">
компонент.ts
setMyClassesCircle(val)
{
let circleClasses
console.info('Inside method')
switch(val)
{
case 1:
{
circleClasses = {
'inprogress-circle': this.inProgress == val,
'completed-circle': this.oneCompleted == true
}
break;
}
case 2:
{
circleClasses = {
'inprogress-circle': this.inProgress == val,
'completed-circle': this.twoCompleted == true
}
break;
}
case 3:
{
circleClasses = {
'inprogress-circle': this.inProgress == val,
'completed-circle': this.threeCompleted == true
}
break;
}
case 4:
{
circleClasses = {
'inprogress-circle': this.inProgress == val,
'completed-circle': this.fourCompleted == true
}
break;
}
Таким образом я привязываю круговые классы к моему шаблону.
Но проблема, с которой я столкнулся, заключается в том, что метод setMyClassesCircle() вызывается более 10 раз, в то время как я вызываю метод только четыре раза. «Метод внутри» печатается более 10 раз в моей консоли.
Я не мог понять, почему метод вызывается так много раз.
демонстрационный код на stackblitz.com был бы более полезным, согласно вашим сомнениям в разделе комментариев ответа Эхсана Киани.
Ответы 3
Angular запускает жизненный цикл changedetection несколько раз, чтобы определить, изменился ли результат вашей функции. Он будет запускать его каждый раз, когда вы нажимаете что-то или происходят подобные события, чтобы определить, изменились ли вещи снова. По этой причине не рекомендуется привязывать значения к функциям, вместо этого вы должны вычислить значения в вашем .ts-файле и просто выполнить привязку к предварительно рассчитанным значениям.
Мне нужно, чтобы значения моих свойств были изменены на основе условия в моем ngOnInit. Но мое представление не обновляется до последнего значения. Я тоже пробовал ngAfterViewInit
Как я могу предварительно рассчитать значения до того, как они достигнут шаблона. Например: я объявил myVar = 5 и хочу изменить на основе условия до того, как он достигнет шаблона. Спасибо за помощь
Я думаю, что он вызывался много раз из-за обнаружения угловых изменений, более чистое решение — использовать встроенный ngclass следующим образом:
<div class = "circle" [ngClass] = "{
'inprogress-circle': inProgress == 1,
'completed-circle': oneCompleted == true }" >
<div class = "circle" [ngClass] = "{
'inprogress-circle': inProgress == 2,
'completed-circle': oneCompleted == true }" >
<div class = "circle" [ngClass] = "{
'inprogress-circle': inProgress == 3,
'completed-circle': oneCompleted == true }" >
<div class = "circle" [ngClass] = "{
'inprogress-circle': inProgress == 4,
'completed-circle': oneCompleted == true }" >
это не точное решение, так как вопрос также имеет условие, зависящее от 1 , 2 ... и т. д.
Вопрос имеет только 4 условия, как вы можете видеть в блоке переключателей, пусть решает оператор.
Спасибо за ответ.. еще немного об этом.. можете ли вы предложить мне способ изменить значение свойства, которое объявляется внутри класса, но было изменено на основе условия в ngOnInit.. Это обновленное значение должно быть принято вид
Извините, но не могли бы вы объяснить немного больше
да... Например, я получаю @input() inProgress в своем компоненте... Я меняю его значение на основе условия в ngOnInit.. Но изменения не отражаются в моем представлении. Я даже пробовал ngAfterViewInit. .Но полученное начальное значение остается прежним в шаблоне
@Sathyanarayanan, возможно, если вы поставите кавычки над значением, оно будет работать так: inProgress == '1'
@Sathyanarayanan, потому что вы не привязываете номер, измените его следующим образом <hello [number]=1></hello>
До того момента у меня было предположение, что только если я передаю свойство дочернему компоненту, у меня должны быть квадратные скобки. В любом случае спасибо за поддержку!
Внутри DOM было четыре узла «Div», поэтому каждый узел вызывался по крайней мере один раз, и каждый раз ваш метод возвращал другое значение, которое снова увеличивалось 4 раза.
Например, это будет ваша последовательность:
1-е обнаружение изменения — метод под названием «–4 раза». 2-е обнаружение изменений — метод под названием «–4 раза». 3-е обнаружение изменения — метод под названием «–4 раза». 4-е обнаружение изменений — метод под названием «–4 раза». Итак, всего ваш метод должен вызываться 16 раз, если есть 4 узла. Попробуйте удалить 1-узел, и ваш метод должен вызываться 4 X 3 = 12 раз. Вот как работает Angular!!
Это ожидаемо. Вы используете метод в шаблоне, и этот метод будет вызываться для каждого обнаруженного изменения.