Angular/TypeScript：_v.context.$implicit.getcolor 不是函数答案

【问题标题】：Angular/TypeScript: _v.context.$implicit.getcolor is not a functionAngular/TypeScript：_v.context.$implicit.getcolor 不是函数
【发布时间】：2019-04-19 11:02:10
【问题描述】：

我正在开发一个 Angular 7 项目，但遇到了一个我没想到的奇怪情况。 Angular 和 TypeScript 有点新。我想在我的 html 中使用 4 个不同的 css 类之一。类名是根据 location.ts 文件中的计算确定的。不是什么复杂的事情，但仍然令人沮丧，为什么我不能以我认为可以的方式使用 angular/typescript。这样做的正确方法是什么？

location.ts 它是我尝试从我的 html 访问的 getcolor() 函数。

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>

【问题讨论】：

stackoverflow.com/questions/22875636/…
请显示/locations 端点的结果是什么样的。还有localionList的初始值是多少？
从 map.component.ts 添加了更多代码。希望这会有所帮助。

标签： angular typescript angular7

【解决方案1】：

您正在尝试在获得订阅答案之前调用您的函数 getColor。你应该做两件事：

确保 locationList 是 Location 类型的数组（您没有显示属性初始化，例如 private locationList: Array<Location>
检查 loc 是否未定义

最后但同样重要的是，你应该使用 NgClass 来绑定一个类！

【讨论】：

如果我删除 getcolor 的东西，那么它工作正常。列表已填充并且它们正在显示。
好吧，如果你尝试使用[ngClass]="loc.getcolor"？你确定骆驼案没有错误吗？（都在下）

【解决方案2】：

好的，我找到了解决方案！ :)

location.service.ts

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

【讨论】：

【解决方案3】：

你可以尝试将getToal绑定到这个组件，因为你只能调用模板中声明的函数

【讨论】：