Angular assign objects in subscribe

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:

method getCards() declared with a return type of void
calls the cardService (imported at top of file) to use the getCards() method
calling .subscribe() to listen for changes to that data
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);
  }
}

turns out it was a syntax error cardlist = Card[]; should have been cardlist: Card[]; — Rilcon42
– Rilcon42, Commented Jul 23, 2018 at 13:26

Sajeetharan · Accepted Answer · 2018-07-23 02:08:59Z

2

You are missing few paranthesis, try it as follows,

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

answered Jul 23, 2018 at 2:08

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dulanga Heshan · Accepted Answer · 2018-07-23 03:59:47Z

0

export class CardComponent implements OnInit {

  cardlist = Card[];

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

answered Jul 23, 2018 at 3:59

Dulanga Heshan

1,4271 gold badge22 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular assign objects in subscribe

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related