Ndtyjky

I'm working on an Angular 7 project and have run in to a weird situation that I didnt expect. A bit new to Angular and TypeScript..
I want to use one of 4 different css classes in my html. The class name is decided based on a calculation in the location.ts file. Not something complicated but still frustrating why I cant use angular/typescript the way I thought I could. What is the proper way to do something like this?

location.ts
Its the getcolor() function that I try to reach from my html.

export class Location {

  location: string;

  name: string;

  current: number;

  max: number;

  isActive: boolean = false;

  color: string;



  getcolor() {

    let fraction = this.current / this.max;

    switch (true) {

      case (fraction < 0.25): { return "empty"; }

      case (fraction < 0.5): { return "half-empty"; }

      case (fraction < 0.75): { return "half-full"; }

      case (fraction < 1): { return "full"; }

      default: { return ""; }

    }

  }

}

location.service.ts

  getLocationList(): Observable<Location> {

    let list = this.http.get<Location>(this.url + "locations/");

    return list;

  };

map.component.ts

constructor(private locationService: LocationService) { }



  public locationList: Location;



  ngOnInit() {

    this.locationService.getLocationList().subscribe(e => this.locationList = e);

  }

map.component.html
Each card should have one of the four different css styles. Might not be the way to do it but for now we just need something to work. Any suggestions to a more correct approach is appreciated :) I jsut try to call the method on the Location class to get the name of the css style to use.

<div *ngFor="let loc of locationList" class="card {{loc.getcolor()}}">

        <span><strong>{{loc.location}}</strong> - {{loc.name}}</span>        

        <div>

          Storage: {{loc.current}}/{{loc.max}} tons

        </div>

        <div>

          Remaining: {{loc.max - loc.current}} tons

        </div>

      </div>

You are trying to call your function getColor before getting your subscribe answer. You should do two things :

• Ensure locationList is an array of type Location (you didn't show your attribut initialisation e.g. private locationList: Array<Location>


• Check that loc is not undefined

Last but not least you should use NgClass to bind a class !

Okay so I found a solution! :)

location.service.tsexport class LocationService {

  constructor(private http: HttpClient) { }

  public url = "/api/location/"

  getLocationList(): Observable<Location> {

    return this.http.get<Location>(this.url + "locations/").pipe(map(x => x.map(y => Location.fromJSON(y)))); 

  };

}

location.ts
Added this static function to the location.ts

static fromJSON(data: any) {

    return Object.assign(new this, data);

  }

map.component.ts
This is the same as before.

  constructor(private locationService: LocationService) { }



  locationList: Location;

  selectedLocation: Location;



  ngOnInit() {

    this.locationService.getLocationList().subscribe(e => this.locationList = e);

  }

map.component.html Now I can get the color out :)

<div *ngFor="let loc of locationList" class="card {{loc.getcolor()}}">

        <span><strong>{{loc.location}}</strong> - {{loc.name}}</span>        

        <div>

          Storage: {{loc.current}}/{{loc.max}} tons

        </div>

        <div>

          Remaining: {{loc.max - loc.current}} tons

        </div>

      </div>