javascript - Angular2 不遍历模型数组

Question

我有以下 typescript :

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 和名称(不用担心描述——我把它们放在模型中，但我知道它们还没有被传递到模板中).

Answer 1

我认为您的模板中存在问题，因为您在循环中使用 selectedSpirit 变量而不是 spirit 变量来显示提示。

这是更新后的 ngFor block :

<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>