订阅中的角度分配对象

Question

I am following a tutorial from here , but I am trying to adapt the heroes.component.ts class slightly by using 'card' instead of 'hero'. When I attempt to call .subscribe() I am getting

ERROR in src/app/card/card.component.ts(12,19): error TS1109: Expression expected.

my version (note cardlist variable name change)

export class CardComponent implements OnInit {

  cardlist = Card[];    //-------LINE 12

   ....  
getCards(): void {
    this.cardService.getCards()     //--------LINE 19
        .subscribe(c => this.cardlist = c);
  }
}

Here is what I think is happening inside the getCards() function:

1. method getCards() declared with a return type of void
2. calls the cardService (imported at top of file) to use the getCards() method
3. calling .subscribe() to listen for changes to that data
4. this bit: c => this.cardlist = c says for every card c passed in from the service add it to cardlist

Clearly I'm wrong about step 4. What did I do wrong?

---

Working tutorial code (reproduced for convenience):

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  selectedHero: Hero;

  heroes: Hero[]; 

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }
}

Answer 1

You are missing few paranthesis, try it as follows,

   getHeroes(): void {
        this.heroService.getHeroes()
        .subscribe(resUserData => {
            this.heroes = resUserData
          });
    }

Answer 2

export class CardComponent implements OnInit {

  cardlist = Card[];

   ....  
getCards(): void {
    this.cardService.getCards()
        .subscribe(c => { this.cardlist = c);
  });
}