1
の配列を反復処理しませI以下の活字体を持っている：私は私が持っているモデルを反復処理しようとするのではなく、個別の呼び出しを開始するまで、正常に動作するために使用Angular2がモデル
import {Component} from 'angular2/core';
export class Spirit {
id: number;
name: string;
description: string;
}
@Component({
selector: 'my-app',
styles:[`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.spirits {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.spirits li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.spirits li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.spirits li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.spirits .text {
position: relative;
top: -3px;
}
.spirits .spirit_id {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}`
],
template:`
<h1>{{title}}</h1>
<h2>Spirit Creatures</h2>
<ul class="spirits">
<li *ngFor="#spirit of spirits"
[class.selected]="spirit === selectedSpirit"
(click)="onSelect(spirit)">
<span class="spirit"><span class="spirit_id">{{selectedSpirit.id}}.</span><span class="spirit_name"> {{selectedSpirit.name}}</span></span>
</li>
</ul>
<!-- <div>
<label>name: </label>
<input [(ngModel)]="spirit.name" placeholder="name">
</div> -->
`
})
export class AppComponent {
spirits = SPIRITS;
selectedSpirit: Spirit;
title = 'Order of the Mouse: Current Characters';
onSelect(spirit: Spirit) { this.selectedSpirit = spirit; }
}
var SPIRITS: Spirit[] = [
{ "id": 1, "name": "Lene-Cow", description:"Lene-Cow is the spirit animal of Ekarel Pelican. Lene-Cow is a short, pleasantly rotund Cow spirit whom the party milks when they are in need of nourishment. Lene-Cow must be milked regularly or she becomes over-filled and uncomfortable." },
{ "id": 11, "name": "Rabbit-Cat", description:"" },
{ "id": 12, "name": "Dragon-Bear", description:"Drogon Barre is a slender, moderately tall man in his early 30s. He generally wears a black jacket and jeans. His spiritual creature is the Dragon-Bear." },
{ "id": 13, "name": "Deer-Wolf", description:"Deer-Wolf always goes by her spiritual creature's name, having switched to it after she began her career as undercover police office. She used to be called Erica [Redacted]." },
{ "id": 14, "name": "Clown-Fox", description:"Christopher James Jones, also known as Clown-Fox, is the mercurial sort and prone to changing his appearance and demeanor as the whim takes him. He is often thought to be both charming and threatening by the men, and sometimes the women, around him. He currently presents an effete persona, mimicking many aspects of gay culture, though most believe this to be a deliberate ruse." },
{ "id": 15, "name": "Furry-Giraffe", description:"Though her spirit animal name is the Furry-Giraffe, FG also goes by the name Harrian sometimes, and sometimes by Lindsay Kidson. Furry-Giraffe is a nurse in training working at St Bartholemew's Hospital in Greater London. She is a member of the Freemasons and involved in a vast conspiracy with altruistic goals, seeking to clear Drogon Barre's name after a campaign to discredit him instigated by a rival lodge, The Noah Masons. The events depicted here lead many other persons to follow Drogon Barre and attempt to get him to write them into the story, but he is usually too concerned for their safety to do so, being careful only to edit in those who use one of several complex secret languages and don't keep trying to solicit him for sex. Furry-Giraffe ofter wears hipster glasses, but not always, and when doing so goes by the spiritual name Giraffe-Furry." },
{ "id": 16, "name": "ThePurpleRabbits", description:"" },
{ "id": 17, "name": "Tiger-Hummingbird", description:"" },
{ "id": 18, "name": "The WIZARD", description:"You know nothing about this man yet, except that Deer-Wolf calls him The Wizard, and says he killed her sister." },
{ "id": 19, "name": "Fire-Stoat", description:"Norman, aka Fire-Stoat, is an angular faced man in his late sixties. His strident intellegence is matched by a penchant for semi-aggressive 'plays' which he acts out online. You have known him for several months prior to the events in The Order of the Mouse." },
];
。しばらくの間、コードは単純に同じ文字の名前を何度も繰り返しました。個々のアイテムをクリックして選択すると、他のすべてのアイテムが同じ名前とIDに変更されます。私は最初から始めましたが、コードではIDと名前を繰り返し処理することはありません（記述については心配しないでください - モデルに入れますが、まだテンプレートに渡されていない）。