שלמה גולדברג
shlomo@haravdotnet.co.il
בפרק הקודם התחלנו להעמיק קצת יותר לתוך הספריה, ולמדנו איך עושים binding דו כיווני, וכיצד מפרידים בעזרת templateUrl בין קובץ התצוגה לבין קובץ הלוגיקה.
בפרק היום נלמד על:
- הוספת מספר Heroes נוספים.
- הצגה של הרשימה
- קצת עיצוב אף פעם לא יזיק
- הצגת המידע בתנאים מסויימים
- הוספת אירועים
בשלב ראשון נרצה להציג יותר מ – hero בודד, ולכן נגדיר מערך של heroes (בהמשך הרשימה תגיע מהשרת, לעת עתה hatd code), נוסיף את הקוד הבא בתחתית הקובץ app.component.ts.
{ 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, עלינו לחשוף אותו כמשתנה בתוך המחלקה, ולכן נשנה טיפה את המחלקה.
title = "Tour of Heroes";
hero: Hero = {
id: 1,
name: "Shlomo Goldberg"
};
heroes = HEROES;
}
שימו לב לשורה האחרונה.
דבר נוסף שחשוב לשים לב אליו, שהמשתנה hero הוא מסוג Hero, אך נכון לעכשיו אין לו שום קשר לרשימה.
כעת נוסיף את הקוד הבא לקובץ app.component.html
<ul>
<li *ngFor="let hero of heroes">
<span>{{hero.id}}</span> {{hero.name}}
</li>
</ul>
הקוד בשורת ה – li, רץ בלולאה (פקודת ngFor) על כל הרשימה (המשתנה heroes שנחשף במחלקה) ועבור כל אחד (המשתנה hero) בעזרת binding אנחנו מציגים את ה – id ואת ה – name שלו.
הרצה של הקוד תציג את הדבר הבא:
נשתמש בספריית bootstrap כדי לעצב את המסך בצורה קצת יותר טובה.
נשנה את קוד ה – html לזה:
<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 (מסיבות שנדבר עליהם באחד הפוסטים הבאים)
בכל מקרה, כרגע התוצאה הרבה יותר מרשימה
השלב הבא, כמובן זה לאפשר לחיצה בצד שמאל על אחד מהרשימה, ולדאוג לכך שבצד ימין נראה את ה – hero הרלוונטי, כדי שזה יקרה עלינו לעשות מספר דברים:
- לדאוג שהמשתנה hero, יצביע על אחד מתוך הרשימה (במקום לאובייקט סטטי)
- להוסיף רישום לאירוע click ברשימה, ולהפעיל מתודה שתדאג לשנות את המשתנה בהתאם.
- לדאוג לשינוי class ברשימה, כך שנדע מי הרלוונטי (מיהו ה – selected hero)
- וכמובן, לוודא שהקוד לא יתרסק במידה ולא בחרנו אף אחד.
נעשה זאת לפי הסדר, ראשית נשנה את השם של המשתנה מ – hero ל – selectedHero, וגם נוסיף מתודה שתאפשר לשנות את הערך שלו.
title = "Tour of Heroes";
selectedHero: Hero;
onselect(hero: Hero) {
this.selectedHero = hero;
}
heroes = HEROES;
}
כעת אם נריץ את הקוד, נקבל הודעת שגיאה על null (כיוון שהמשתנה seletedHero, אינו מאותחל), ולכן נשתמש ב – ngIf כדי לוודא שצד ימין (בתצוגה) אינו מתרנדר כל עוד שלא בחרנו hero.
כמובן שגם נשנה בכל מקום שכתבנו hero ב – UI ל – selectedHero (היכן שאנחנו מציגים את ה – id, ותיבת הטקסט שמקושרת ל – name)
<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, ובנוסף נדאג לשנות את המחלקה בהתאם.
class="list-group-item"
(click)="onselect(hero)"
[class.active]="hero==selectedHero">
{{hero.name}} <span class="badge">{{hero.id}}</span>
</li>
כעת בזמן לחיצה על אחד מהרשימה בצד שמאל, יקרו שני דברים:
- נראה בצד ימין את ה – selectedHero.
- נראה שינוי ברשימה (שינוי של – css)
ה – li הרלוונטי, יקבל את המחלקה active במידה ומדובר בשורה הנכונה.
התצוגה עכשיו תראה כך:
