ngIf - קבוצת תנאים כמחלקה

[yyy]

נניח שיש לי 10 אלמנטים מסוג <p>
ואני רוצה להוסיף להם את ה-ngIf הבא:

*ngIf="longComplexConditions"
האם יש דרך לכתוב משהו בסגנון הזה:

class myConditionsCls{
  if  myconditions==true
        return true 
  else 
        return false
}

ואז להוסיף את זה ל-ngIf* כך:

<p *ngIf="myConditionsCls">

זה יכול לעזור במקרה של תנאים מורכבים וארוכים.

ניסיתי לממש כפוקציה

num:number=1;
  myNgIf(): Boolean {
    if (this.num == 1) {
      return true;
    }
    return false;
  }

אבל אנגולר בודק את זה רק בריצה הראשונה, ובמקרה של שינוי המשתנה num נניח ל-10 ה-view לא ישתנה כך שלא מדובר ב-binding אמיתי...
תודה רבה

[yossiz]

@yyy כתב בngIf - קבוצת תנאים כמחלקה:

האם יש דרך לכתוב משהו בסגנון הזה:

class myConditionsCls{
  if  myconditions==true
        return true 
  else 
        return false
}

אי אפשר לכתוב קלאס כמו שכתבת, התנאי אמור להיות בתוך פונצקיה ולא בתוך קלאס

@yyy כתב בngIf - קבוצת תנאים כמחלקה:

ניסיתי לממש כפוקציה

num:number=1;
  myNgIf(): Boolean {
    if (this.num == 1) {
      return true;
    }
    return false;
  }

אבל אנגולר בודק את זה רק בריצה הראשונה, ובמקרה של שינוי המשתנה num נניח ל-10 ה-view לא ישתנה כך שלא מדובר ב-binding אמיתי...

אני לא מומחה ואפילו לא מתחיל באנגולר, בהתחלה חשבתי שאולי יכול להיות שהבעיה היא בצורה שבו אתה מעדכן את הערך של num, חשבתי שאם אתה כותב לדוגמה setTimeout(() => num = 10, 1000) שאנגולר לא יזהה את השינוי, כי אין מנגנון שבודק כל שנייה מה הערך של num וצריך איכשהו להודיע לאנגולר שהערך השתנה
אבל התברר לי שגם שינויים שבאמצעות setTimeout בכל זאת אנגולר יזהה את השינוי (עיין ספריית zone.js), אז לא ברור לי למה אצלך זה לא עובד

הנה דוגמה שלי, נסה לבדוק מה שונה בדוגמה שלי (שעובדת) מאשר בשאלה שלך
https://stackblitz.com/edit/angular-ivy-afdnbx?file=src/app/app.component.ts

הכי טוב שתביא stackblitz שמדגים את הבעיה

[WEB]

@yossiz
אתה קראת לפונקציה בתוך הHTML, עם ה(). לכן זה עובד

[גמליאל]

@yyy
אני חושב שדי ברור למה זה לא יעבוד כשאתה מעביר מחלקה.
כשאתה מעביר פונקציה שמחזירה ערך בוליאני, הפונקציה נקראת פעם אחת, כמו בדוגמא שלך.
בדוגמא של @yossiz הפונקציה myComplicatedCondition שנקרא בטמפלט מחזירה את המשתנה X שמשנה את ערכו בכל שנייה. היא לא מחזירה תשובה בוליאנית חד פעמית.
(עריכה: טעות!)

למעשה, לא הבנתי מה אתה רוצה להרוויח עם הפונקציה שלך, מה רע ב -

*ngIf="num==1"

כתבת:

זה יכול לעזור במקרה של תנאים מורכבים וארוכים.

אולי תפרט יותר על המקרה

[יוסף בן שמעון]

@גמליאל כתב בngIf - קבוצת תנאים כמחלקה:

כשאתה מעביר פונקציה שמחזירה ערך בוליאני, הפונקציה נקראת פעם אחת, כמו בדוגמא שלך.

זה אינו, וכמו שהתבאר בטוט"ד בדברי @yossiz
הפונקציה נקראת בכל שינוי, ויש בינדינג מלא גם כאשר מצמידים אותו לערך המוחזר מפונקציה, והאשכול כולו נולד בגלל טעות סופר של ידידנו @yyy ששכח לשים סוגריים עגולות בקריאה לפונקציה

[גמליאל]

@יוסף-בן-שמעון
אכן, בדקתי עכשיו ונוכחתי לראות שטעיתי.
האמת שזה ממש מפתיע אותי, זו התנהגות לא צפויה של אנגולר (בכל אופן עד לפני כמה דקות...).
ידעתי שאנגולר כורך את עצמו למשתנים,
אבל כריכה לפונקציה? הוא קורא לפונקציה בלולאה אינסופית?

עריכה: כנראה שבדיוק זו הסיבה להמלצה החד משמעית שלא להכניס פונקציות לתבנית.

[יוסף בן שמעון]

@גמליאל כתב בngIf - קבוצת תנאים כמחלקה:

הוא קורא לפונקציה בלולאה אינסופית?

לא לולאה אינסופית, אלא רינדור מחדש בכל מידע, בדיוק כמו הכריכה של שאר המשתנים, גם בכריכה למשתנה סטטי הוא מחשב מחדש את כל הקומפוננטה בכל שינוי
לא צריך לפחד מזה מאד, אם הפונקציה לא עושה חישובים מורכבים מידי, אפשר להשתמש בזה בלי חשש, אני משתמש בזה די הרבה ולא נתקלתי בבעיות ביצועים

[yyy]

תקשיבו חברה, אתם יותר יעילים ומהירים מ-stackoverflow!!!. ממש כל הכבוד לכם.
האמת שגם לי התחדש שאפשר לעשות binding לפונקציה. בנוסף הייתה לי גם שגיאת תחביר כמו שהעירו, שבפונקציה שכתבתי שמשנה את המשתנה של ה-binding, לא קראתי לה עם "()", ומודה ועוזב ירוחם.

מה שנשאר לי הוא רק לענות על זה:
@גמליאל כתב בngIf - קבוצת תנאים כמחלקה:

אולי תפרט יותר על המקרה

זו למעשה תשובה לשאלה למה צריך פונקציה בחיים...
אחד מהתשובות הם שבמצב שאתה צריך לכתוב תנאי המורכב מ-15 תתי תנאים, ולהכפיל את זה פי 500 אלמנטים, הקוד יהיה מסורבל בעיין ומורכב לשינוי.
תודה רבה שוב.

[yyy]

ותודה מיוחדת ל@yossiz על ההשקעה ב-stackblitz.

[יוסף בן שמעון]

@yyy אם בכל האלמנטים התנאים שווים, ואין פרמטרים שמשנים ביניהם, אז זה באמת בל תשחית להפעיל את הפונקציה על כל אלמנט בנפרד, כדאי להפעיל אותה פעם אחת ולשמור את התוצאה שלה במשתנה, ושאר האלמנטים יקחו את התנאי מהמשתנה

לדוגמא תראה את ההבדל בין שני ה stackblitz האלו, כמה פעמים הפונקציה נקראת בכל לחיצה
https://stackblitz.com/edit/angular-ivy-p91zdg?file=src/app/app.component.html

https://stackblitz.com/edit/angular-ivy-gpyvpw?file=src/app/app.component.ts