RXJs Angular - object undefined

Question

I will preface this with the knowledge I am VERY new to angular, as in I am trying to get simple things to work and struggling greatly!

I have a simple WebAPI that will return a JSON array containing three objects:

URL: https://localhost:44397/api/account

testListType.ts

export interface listTypes {
    limitTypeId: number;
    limitTypeText: string;
    limitTypeActive: boolean;
}

I then load rxjs up unto a service

test.service.ts

import { Injectable } from '@angular/core';
import { listTypes } from '../models/testListType';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class TestService {


  getlistTypes(): Observable<listTypes[]> {
    var returnable = this.http.get<listTypes[]>('https://localhost:44397/api/account');
    return returnable;
  }

  constructor(private http: HttpClient) { }
}

And finally try and display the content of that return on a component

testing.component.ts

import { Component, OnInit } from '@angular/core';
import { listTypes } from '../models/testListType';
import { TestService } from '../services/test.service';


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

  lists: listTypes[] = [];

  constructor(private testService: TestService) { }

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

  getListTypes(): void {
    this.testService.getlistTypes()
        .subscribe(lists => this.lists = lists);
  }

}

This is the result of modifying the Hero's of Ages tutorial on Angular to fit my requirements. Unfortunately it displays nothing and I am too novice to understand how to debug the subscribe method (I have attempted and get a non-sensical object).

All I can see in the debugger when I try to access lists is the following:

Uncaught ReferenceError: lists is not defined

No doubt there is a fundamental I have missed and I expect a angular expert will see it in seconds, but I have been staring at this for 2 hours now!

Any assistance would be great.

UPDATE - Added component html

testing.component.html

<div *ngIf="testService.listTypes.length">

    <h2>Test</h2>
    <div *ngFor='let lists of testService.listTypes'> {{listTypes}} </div>
  
  </div>

Share the template code (the html) where you are using the lists from the component. — atiyar
– atiyar, Commented Mar 21, 2021 at 3:24

atiyar · Accepted Answer · 2021-03-21 04:00:19Z

2

Modify the template code to -

<div *ngIf = "lists.length>0">
    <h2>Test</h2>
    <div *ngFor="let item of lists"> {{ item }} </div>  
</div>

Its the component's responsibility to gather data which would be displayed through the template. You have already done that in the getListTypes() by calling the service method which populated the lists array with data returned by the service.

The template's responsibility is to display the data gathered by the component. With the *ngFor="let item of lists" statement, you just enumerate over the already populated lists array from the component, and display each item. You shouldn't call services from the template code.

edited Mar 21, 2021 at 4:00

answered Mar 21, 2021 at 3:31

atiyar

8,3857 gold badges41 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

RXJs Angular - object undefined

testListType.ts

test.service.ts

testing.component.ts

testing.component.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

testListType.ts

test.service.ts

testing.component.ts

testing.component.html

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related