אתה יכול להוסיף הנחיות ל-HTML בפרויקט Angular שלך. חלקם שולטים במבנה הסימון שלך בעוד שאחרים מתמקדים בתכונות.

מאמר זה יעבור על שש הנחיות Angular הנפוצות ביותר: ngFor, ngIf, ngClass, ngStyle, ngModel ו-ngSwitch.

מהן הנחיות זוויתיות?

הנחיות Angular מאפשרות לך להשתמש בהצהרות if וללולאות, ולהוסיף התנהגות אחרת לקוד HTML של פרויקט Angular.

instagram viewer
הוֹרָאָה תיאור
*ngIf אתה יכול להשתמש ב-ngIf כאשר אתה רוצה שקוביות HTML מסוימות יוצגו רק אם הם עומדים בתנאי מסוים. לדוגמה, אם היה לך טופס עם חלון קופץ שמוצג לאחר שמשתמש הזין קלט עבור שדה מסוים.
*ngFor אתה יכול להשתמש ב-ngFor אם אתה צריך בלוק מסוים לחזור עליו פעמים רבות. לדוגמה, אם הייתה לך רשימה של פריטים ואתה צריך להציג div עבור כל פריט.
*מחלקה ng זה מוסיף סטיילינג מותנה באמצעות מחלקה. אם הצהרת אם עומדת בתנאי, היא תחיל את המחלקה שצוינה.
*ng סטייל זה מוסיף סגנון מותנה בשורה. אם הצהרת אם עומדת בתנאי, היא תחיל את הסגנונות שצוינו.
*ngModel זה מאפשר לך לבצע כריכה דו כיוונית. זה אומר שאתה יכול להעביר נתונים בשני הכיוונים בין קובץ HTML ו-TypeScript. לדוגמה, אתה יכול להעביר ערך של תכונה מקובץ TypeScript לקובץ HTML, ולהיפך.
*ngSwitch זה מאפשר לך להוסיף הצהרת switch עם מקרים רבים כדי לבדוק ערכים רבים. בהתבסס על המקרים, רכיבי HTML מסוימים יופיעו.

הנחיות מבניות כוללות את המבנה של רכיבי HTML. אלה כוללים ngIf, ngFor ו-ngSwitch. הנחיות תכונות כוללות שינוי המאפיינים של רכיבי HTML. אלה כוללים ngStyle, ngClass ו-ngModel.

כיצד להשתמש ב-ngIf

כדי להשתמש ב-ngIf, תצטרך תנאי להעריך כ-true כדי שרכיב HTML מסוים יוצג.

  1. הוסף שני משתנים לקובץ TypeScript שלך. בדוגמה זו, יש משתנה noPlaylists ומשתנה לאחסון רשימות ההשמעה. משתנה זה יוערך כ-true אם אורך מערך הפלייליסטים הוא 0.
    noPlaylists: boolean = false;
    רשימות השמעה: כל = [];
    constructor() { }
     ngOnInit(): void {
     if (this.playlists.length 0) {
     this.noPlaylists = true;
     }
    }
  2. ב-HTML, הוסף את ההצהרה *ngIf. אם noPlaylists נכון, הודעת השגיאה הכלולה בטווח שלמטה תופיע. אחרת, זה לא יקרה. אתה יכול להחיל ngIf על סוגים שונים של תגי HTML.
    

    אין רשימות השמעה זמינות.
  3. כדי להוסיף רכיב "אחר" ל-if-statement, תצטרך להוסיף את קוד ה-HTML עבור החלק "אחר" בבלוק תבנית.
    

    אין רשימות השמעה זמינות.
    

    


    

    נמצאו רשימות השמעה.

כיצד להשתמש ב-ngFor

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

  1. בקובץ TypeScript, הוסף פריטים למערך.
    רשימות השמעה: כל = [
     {"name": "רוק", "numberOfSongs": 5},
     {"name": "עכשווי", "numberOfSongs": 9},
     {"name": "Popular", "numberOfSongs": 14},
     {"name": "אקוסטית", "numberOfSongs": 3},
     {"name": "שירי חתונה", "numberOfSongs": 25},
     {"name": "Metal", "numberOfSongs": 0},
    ];
  2. בקובץ ה-HTML, הוסף את ההצהרה *ngFor.
    נמצאו רשימות השמעה.
    

    

    {{playlist.name}}
    {{playlist.numberOfSongs}} שירים
    בתוך ה-ngFor, תוכל להפנות לכל אובייקט במערך באמצעות המשתנה "פלייליסט". "playlist.name" ו-"playlist.numberOfSongs" ידפיסו את שתי התכונות בתוך תָג.

כיצד להשתמש ב-ngClass

אתה יכול לשנות את מחלקת הסטיילינג שבה משתמש div מסוים, בהתבסס על תנאי.

  1. הוסף שתי מחלקות לקובץ ה-CSS עם סגנונות שונים. אתה יכול להוסיף כל סוג של עיצוב CSS שאתה רוצה, כגון צבעי רקע שונים.
    ‎.songs {
     צבע רקע: #F7F5F2;
    }
    .noSongs {
     צבע רקע: #FFA8A8;
    }
  2. בתוך ה-for-loop מהשלב הקודם, הוסף את הוראת התכונה ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" משתמש באותו אופרטור שליש ש-JavaScript ושפות אחרות להשתמש.
    

    

    {{playlist.name}}
    {{playlist.numberOfSongs}} שירים
    אם מספר השירים גדול מאפס, הוא יחיל את המחלקה "שירים" על ה-div. זה ייתן ל-div צבע רקע אפור. אחרת, אם מספר השירים הוא אפס, הוא יחיל את המחלקה "noSongs" על ה-div. זה ייתן ל-div צבע רקע אדום.

כיצד להשתמש ב-ngStyle

במקום להשתמש ב-ngClass, אתה יכול להשתמש ב-ngStyle אם אתה רוצה ליישם סטיילינג בשורה במקום סטיילינג דרך מחלקה.

  1. שנה את ngClass מהשלב הקודם להשתמש ב-ngStyle במקום זאת.
    

    {{playlist.name}}
    {{playlist.numberOfSongs}} שירים

  • אם אתה צריך להחיל יותר מסגנון מוטבע אחד, תוכל להפריד כל סגנון באמצעות פסיק.
    [ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0? 'black': 'darkblue' }"

    • כיצד להשתמש ב-ngModel

    אתה יכול להשתמש ב-ngModel עבור כריכה דו-כיוונית. זה אומר שאתה יכול להעביר את הערך של תכונה בין קובצי HTML ו-TypeScript.

    לדוגמה, נניח שיש לך אלמנט קלט בקובץ ה-HTML שמשתמש ב-ngModel. התכונה ngModel קשורה למשתנה בקובץ TypeScript. כאשר תזין ערך בקלט, הוא יעדכן את המשתנה בקובץ TypeScript.

    השינויים שנעשו בתכונה בקובץ TypeScript ישתקפו גם ב-HTML אם divs אחרים משתמשים במשתנה זה.

    1. ב-app.module.ts, הוסף את FormsModule לתוך הייבוא ​​בחלק העליון של הקובץ, וגם למערך הייבוא.
      יבא את { FormsModule } מ-'@angular/forms';
      @NgModule({
       יבוא: [
       ...
       FormsModule
       ]
      })
    2. הוסף תכונה בקובץ TypeScript כדי לעקוב אחר מתי המשתמש משנה את השם של רשימת השמעה.
      שינוי שם לפלייליסטים: boolean = false;
    3. הפוך את הפלייליסטים המשתנים לציבוריים כך שניתן יהיה לגשת אליו בעת שימוש ב-ngModel בקובץ ה-HTML.
      רשימות השמעה ציבוריות: כל = [
       ...
      ];
    4. הוסף שני כפתורים בקובץ ה-HTML, שיאפשרו לך לשנות שם או לבטל שינוי שם של כל פלייליסט.

    5. הוסף תיבת קלט בתוך div של כל פלייליסט. הקלט יהיה גלוי רק כאשר תלחץ על שנה שם רשימת השמעה לַחְצָן. לתיבת קלט זו יהיה ngModel מאוגד ל-"playlist.name".

      כאשר תזין שם חדש בתיבת הקלט, playlist.name יתעדכן בקובץ TypeScript. זה גם יעדכן את ה-divs האחרים בקובץ ה-HTML המשתמשים ב-playlist.name.

    כיצד להשתמש ב-ngSwitch

    אתה יכול להשתמש ב-ngSwitch כדי להציג אלמנטים מסוימים בהתבסס על המקרים בתוך מארז מתג.

    1. הוסף תכונת "דירוג" חדשה לאובייקטים בתוך מערך הפלייליסטים. תכונה זו יכולה להיות כל מספר בין 0 ל-5 (כולל).
      רשימות השמעה ציבוריות: כל = [
       {"name": "רוק", "numberOfSongs": 5, "rating": 5},
       {"name": "עכשווי", "numberOfSongs": 9, "rating": 1},
       {"name": "Popular", "numberOfSongs": 14, "rating": 5},
       {"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
       {"name": "שירי חתונה", "numberOfSongs": 25, "rating": 5},
       {"name": "Metal", "numberOfSongs": 0, "rating": 0},
       ];
    2. הוסף מקרה מתג מתחת לשם ומספר השירים עבור רשימת השמעה. בהתבסס על מספר הדירוג של הפלייליסט, הפלייליסט יציג את מספר הכוכבים הנכון.
      

      {{playlist.name}}
      {{playlist.numberOfSongs}} שירים
      

      

      

      ★
      

      ★★
      

      ★★★
      

      ★★★★
      

      ★★★★★
      

      אין דירוגים

    למד עוד עם Angular

    כעת למדת את היסודות של הנחיות Angular, כולל כיצד להשתמש ב-ngIf, ngFor, ngClass, ngStyle, ngModel ו-ngSwitch. אתה יכול לשלב אותם כדי ליצור ממשקי משתמש מורכבים יותר. יש לך עוד כל כך הרבה לחקור וללמוד על Angular, לא משנה אם אתה מתחיל או ברמה מתקדמת.

    8 קורסים זוויתיים מובילים למתחילים ומתקדמים

    קרא הבא

    לַחֲלוֹקצִיוּץלַחֲלוֹקאימייל

    נושאים קשורים

    • תִכנוּת
    • תִכנוּת
    • JavaScript
    • HTML
    • CSS

    על הסופר

    שרלין פון דרהנן (5 מאמרים שפורסמו)

    שרלין היא כותבת טכנולוגיה ב-MUO ועובדת גם במשרה מלאה בפיתוח תוכנה. יש לה תואר ראשון ב-IT ויש לה ניסיון קודם בהבטחת איכות ובהדרכה אוניברסיטאית. שרלין אוהבת לשחק ולנגן בפסנתר.

    עוד מאת שרלין פון דרהנן

    הירשם לניוזלטר שלנו

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

    לחץ כאן כדי להירשם