1

dizisi yineleme değil ben şu typescript var: Ben var modeller arasında yineleme çalışırken yerine tek tek her çağırarak başlayana kadar iyi çalışmak için kullanılanAngular2 modelleri

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." }, 
]; 

. Bir süre için kod tekrar tekrar aynı karakter isimlerini tekrarladı; Seçmek için tek bir öğeye tıkladığımda, diğer tüm öğeler aynı ada ve adla değişecektir. Sıfırdan başladım, ama şimdi kod, kimlikler ve isimlerle tekrarlamayacak (açıklamalarla ilgili endişelenme - onları modele koydum ama şablona henüz geçilmediğinin farkındayım)).

cevap

2

Şablonunuzda bir sorun olduğunu düşünüyorum, çünkü ipuçları görüntülemek için spirit yerine selectedSpirit değişkenini kullanın.

<ul class="spirits"> 
    <li *ngFor="#spirit of spirits" 
    [ngClass]="{selected: (spirit === selectedSpirit)}" 
    (click)="onSelect(spirit)"> 
    <span class="spirit"><span class="spirit_id">{{spirit.id}}.</span> <!-- Here --> 
    <span class="spirit_name"> {{spirit.name}}</span></span> <!-- Here --> 
    </li> 
</ul> 
: Burada

güncellenmiş ngFor bloktur