Angular / TypeScript: _v.context. $ Implicit.getcolor не является функцией

Question

Я работаю над проектом Angular 7 и столкнулся со странной ситуацией, которую я не ожидал. Немного нового в Angular и TypeScript. Я хочу использовать один из 4 различных классов CSS в моем HTML. Имя класса определяется на основе расчета в файле location.ts. Не что-то сложное, но все же расстраивает, почему я не могу использовать angular / typcript так, как я думал. Как правильно сделать что-то подобное?

location.ts Это функция getcolor (), которую я пытаюсь найти из моего 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 Каждая карта должна иметь один из четырех разных стилей CSS. Это может быть не способ сделать это, но сейчас нам просто нужно что-то для работы. Любые предложения по более правильному подходу приветствуются :) Я просто пытаюсь вызвать метод класса Location, чтобы получить имя используемого стиля CSS.

<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>

Answer 1

Хорошо, так что я нашел решение!:)

location.service.ts класс экспорта 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 Добавлена ​​эта статическая функция в location.ts

static fromJSON(data: any) {
    return Object.assign(new this, data);
  }

map.component.ts Это то же самое, что и раньше.

  constructor(private locationService: LocationService) { }

  locationList: Location[];
  selectedLocation: Location;

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

map.component.html Теперь я могуполучить цвет:)

<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>

Answer 2

Вы пытаетесь вызвать функцию getColor, прежде чем получить ответ о подписке.Вы должны сделать две вещи:

• Убедитесь, что locationList является массивом типа Location (вы не показали свою инициализацию атрибута, например, private locationList: Array<Location>
• Проверьте, что loc не является неопределенной

И последнее, но не менее важное: вы должны использовать NgClass для связывания класса!