Question

我有一堂简单的课。

export class TestModel {
  id: number;
  month: string;
  year: string;

  get monthYear(): string {
    return this.month + '-' + this.year;
  }
}

，并在其中填充了一个典型的服务调用以获取值列表。

getVehicleMonths(): Observable<TestModel[]> {
        return this.http.get<TestModel[]>('api/monthyears')
                   .pipe(map(data => data['results']));
    }

我的组件正在获取列表，确定。

在HTML中，我想显示这种语法的计算属性，但是什么也没显示。

<mat-select formControlName="vehicleMonthId" (selectionChange)="onValueChanged($event)" aria-required="false">
  <mat-option *ngFor="let c of monthsAndYears" [value]="c.id">{{c.monthYear}} 
  </mat-option>
</mat-select>

我知道我可以做{{c.month}}-{{c.year}}，但是如何使计算字段起作用？

或者是否有MobX方法（例如Vue.js Aurelia.io）并且可以使它与@computed属性一起使用？

谢谢。

Answer 1

您的代码最初不应该工作。您不能只映射到具有函数的类。如果您有适当的构造函数，例如那么get方法将正常工作

import { Component } from '@angular/core';

export class Testmodel {
  a: string;
  b: string;

  get ab(): string {
    return this.a+'-'+this.b;
  }

  constructor(a: string, b: string) {
    this.a = a;
    this.b = b;
  }

  /*
       Alternatively, if you have a complex constructor, you could do something like 
  constructor(options: {'a': string, 'b': string}) {
    this.a = options.a;
    this.b = options.b;
  }

  and then in the mapper just 
     result => new Testmodel(result)
  */ 
}

@Component({
  template: `<div *ngFor="let c of y">{{c.ab}}</div>`,
  styleUrls: [],
  selector: 'app-list'
})
export class Blub {
  x = [{'a': 'Hallo', 'b': 'World'}, {'a': 'Foo', 'b': 'Bar'}];
  y: Testmodel[];

  constructor() {
    this.y = this.x.map(a => new Testmodel(a.a, a.b));
  }
}

收益率：

光环世界

Foo-Bar

ngFor中的Angular 6计算属性绑定不起作用

1 个答案: