מדריך אנגולר 2, פרק 3 – Master/Detail

27 בספטמבר 2016

2 תגובות

לתוכן העניינים

 

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

 

בפרק היום נלמד על:

  • הוספת מספר Heroes נוספים.
  • הצגה של הרשימה
  • קצת עיצוב אף פעם לא יזיק
  • הצגת המידע בתנאים מסויימים
  • הוספת אירועים

 

בשלב ראשון נרצה להציג יותר מ – hero בודד, ולכן נגדיר מערך של heroes (בהמשך הרשימה תגיע מהשרת, לעת עתה hatd code), נוסיף את הקוד הבא בתחתית הקובץ app.component.ts.

Code Snippet
const HEROES: Hero[] = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celeritas' },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
];

 

בשלב הבא, כדי שנוכל להציג את הרשימה ב – UI, עלינו לחשוף אותו כמשתנה בתוך המחלקה, ולכן נשנה טיפה את המחלקה.

Code Snippet
export class AppComponent {
    title = "Tour of Heroes";
    hero: Hero = {
        id: 1,
        name: "Shlomo Goldberg"
    };

    heroes = HEROES;
}

 

שימו לב לשורה האחרונה.

דבר נוסף שחשוב לשים לב אליו, שהמשתנה hero הוא מסוג Hero, אך נכון לעכשיו אין לו שום קשר לרשימה.

 

כעת נוסיף את הקוד הבא לקובץ app.component.html

Code Snippet
<h2>My Heroes</h2>
<ul>
    <li *ngFor="let hero of heroes">
        <span>{{hero.id}}</span> {{hero.name}}
    </li>
</ul>

הקוד בשורת ה – li, רץ בלולאה (פקודת ngFor) על כל הרשימה (המשתנה heroes שנחשף במחלקה) ועבור כל אחד (המשתנה hero) בעזרת binding אנחנו מציגים את ה – id ואת ה – name שלו.

הרצה של הקוד תציג את הדבר הבא:

image

 

נשתמש בספריית bootstrap כדי לעצב את המסך בצורה קצת יותר טובה.

נשנה את קוד ה – html לזה:

Code Snippet
<div class="container">
    <div class="page-header">
        <h1>Angular 2 demo <small>{{title}}</small></h1>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>My Heroes</h2>
                </div>
                <div class="panel-body">
                    <ul class="list-group">
                        <li *ngFor="let hero of heroes" class="list-group-item">
                            {{hero.name}} <span class="badge">{{hero.id}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="well">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-3">Id:</label>
                        <div class="col-sm-9">
                            <p class="form-control-static">{{hero.id}}</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">Name:</label>
                        <div class="col-sm-9">
                            <input class="form-control" [(ngModel)]="hero.name" name="heroName"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

 

אני לא אסביר את השינויים הללו, מי שצריך הסברים מוזמן לעבור על המדריך שלי על bootstrap, השינוי היחיד בקוד, הינו שהאלמנט input קיבל ערך במאפיין name (מסיבות שנדבר עליהם באחד הפוסטים הבאים)

בכל מקרה, כרגע התוצאה הרבה יותר מרשימה

image

 

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

  • לדאוג שהמשתנה hero, יצביע על אחד מתוך הרשימה (במקום לאובייקט סטטי)
  • להוסיף רישום לאירוע click ברשימה, ולהפעיל מתודה שתדאג לשנות את המשתנה בהתאם.
  • לדאוג לשינוי class ברשימה, כך שנדע מי הרלוונטי (מיהו ה – selected hero)
  • וכמובן, לוודא שהקוד לא יתרסק במידה ולא בחרנו אף אחד.

 

נעשה זאת לפי הסדר, ראשית נשנה את השם של המשתנה מ – hero ל – selectedHero, וגם נוסיף מתודה שתאפשר לשנות את הערך שלו.

Code Snippet
export class AppComponent {
    title = "Tour of Heroes";
    selectedHero: Hero;

    onselect(hero: Hero) {
        this.selectedHero = hero;
    }

    heroes = HEROES;
}

 

כעת אם נריץ את הקוד, נקבל הודעת שגיאה על null (כיוון שהמשתנה seletedHero, אינו מאותחל), ולכן נשתמש ב – ngIf כדי לוודא שצד ימין (בתצוגה) אינו מתרנדר כל עוד שלא בחרנו hero.

כמובן שגם נשנה בכל מקום שכתבנו hero ב – UI ל – selectedHero (היכן שאנחנו מציגים את ה – id, ותיבת הטקסט שמקושרת ל – name)

Code Snippet
<div class="well" *ngIf="selectedHero">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-3">Id:</label>
            <div class="col-sm-9">
                <p class="form-control-static">{{selectedHero.id}}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">Name:</label>
            <div class="col-sm-9">
                <input class="form-control" [(ngModel)]="selectedHero.name" name="heroName"/>
            </div>
        </div>
    </form>
</div>

 

כעת כאשר נריץ, לא נראה שום דבר (כיוון שלעת עתה selectedHero הוא null).

נוסיף רישום לאירוע click על ה – li, ובנוסף נדאג לשנות את המחלקה בהתאם.

Code Snippet
<li *ngFor="let hero of heroes"
    class="list-group-item"
    (click)="onselect(hero)"
    [class.active]="hero==selectedHero">
    {{hero.name}} <span class="badge">{{hero.id}}</span>
</li>

 

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

  • נראה בצד ימין את ה – selectedHero.
  • נראה שינוי ברשימה (שינוי של – css)

ה – li הרלוונטי, יקבל את המחלקה active במידה ומדובר בשורה הנכונה.

התצוגה עכשיו תראה כך:

image

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

2 תגובות

  1. Pingback: אנגולר 2, הקדמה ותוכן העניינים | שלמה גולדברג (מקבוצת הרב דוטנט) - shlomo@haravdotnet.co.il