Angular 2 http.get 调用，数组长度为 0

Question

我很难理解为什么我的数组是空的，我有一个 ASP.Net api ctr，我用 angular 2 服务调用它。 但由于某种原因，角度服务结果我是空的？当我调试时，我可以看到 API 返回了一个卡片类型的列表。因此，不是 api 没有返回结果。

这是我的打字稿 CardModel：

export class Card {
cardId: string;
name: string;
cardset: string;
type: string;
faction: string;
rarity: string;
cost: string;
attack: string;
health: string;
durability: string;
text: string;
inGameText: string;
flavor: string;
artist: string;
collectible: string;
elite: string;
race: string;
playerClass: string;
howToGet: string;
img: string;
imggold: string;
locale: string;
mechanics: string[];

}

这是我的 Angular 2 服务，当我调试该服务时，我可以看到在 Init 上调用了该服务，所以这不是问题，

getCards(): Observable<Card[]> {


    return this.http.get(this.cardsUrl)
        .map((res: Response) => res.json().data as Card[])
        .catch((error: any) => Observable.throw(error.json().error || 'Server error'));

}

这里是调用服务的组件，

ngOnInit(): void {
    this.loadCards();
}

loadCards() {
    return this.cardService.getCards()
        .subscribe(
        card => this.cards = card,
        err => {
            console.log(err);
        });
}

你们中有人知道问题可能是什么吗？

编辑： 这是我希望显示数据的地方

<table>
<thead>
    <tr>
        <th>
            Name
        </th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let card of cards">
        <td>{{card.name}}</td>
    </tr>
</tbody>
</table>

Answer 1

ng-repeat 是 Angular1 语法。在 Angular2 中使用 ngFor 代替。

例子：

@Component({
  selector: 'my-app',
  template: `Hello World
  <tr *ngFor="let card of cards">
    <td>{{card?.name}}</td>
  </tr>`,
  directives: [],
  providers: []
})
export class AppComponent {
    private cards;
    constructor(){
      this.cards = [{name: 1},{name: 2},{name: 3}];
    }
}

以下是完整示例：http://plnkr.co/edit/pJWkLtiYonUpJfjZjCGd?p=preview

loadCards() {
    return this.cardService.getCards()
        .subscribe(
        (card) => {
          this.cards = card;
          console.log(this.cards); // Does this print undefined?
        },
        err => {
            console.log(err);
        });
}