CODEWITHSUNDEEP
angularrxjs
Caz1224
Caz1224

Reputation: 1569

RXJs Angular - object undefined

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>

Upvotes: 0

Views: 92

Answers (1)

atiyar
atiyar

Reputation: 8326

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.

Upvotes: 2

Related Questions