Question

我正在开发一个小的Angular应用程序，该应用程序旨在列出银行帐户，并能够使用CRUD（也有交易）来操纵它们。但这对我来说是个问题，我真的不明白为什么。当我单击列出的帐户之一时，它会将我发送到包含帐户详细信息（余额，姓名等）的另一页，但是我已经很好地设置了（至少我认为是）Get（id），我得到一个对象，然后该对象可以操纵数据。但这是行不通的，而且我总是会遇到与这里相同的错误：

Error

有我的帐户服务（我使用HttpClient的Get（id））：

 public getCompte(id: number): Observable<Compte>  {
    return this.http.get<Compte>('http://localhost:33713/api/Compte/' + id);
  }

我的帐户类别为：

export class Compte {
  private _Id: number;
  private _Nom: string;
  private _Solde: number;
  private _AllowsDecouvert: boolean;

  constructor(Nom?: string, Montant?: number, Decouvert?: boolean) {
    this._Nom = Nom;
    this._Solde = Montant;
    this._AllowsDecouvert = Decouvert;
  }

  get Id(): number {
    return this._Id;
  }

  set Id(value: number) {
    this._Id = value;
  }

  get Nom(): string {
    return this._Nom;
  }

  set Nom(value: string) {
    this._Nom = value;
  }

  get Solde(): number {
    return this._Solde;
  }

  set Solde(value: number) {
    this._Solde = value;
  }

  get AllowsDecouvert(): boolean {
    return this._AllowsDecouvert;
  }

  set AllowsDecouvert(value: boolean) {
    this._AllowsDecouvert = value;
  }

  public static fromJSON(rawCompte: any) : Compte {
    const tmpCompte = new Compte(rawCompte['Nom'], rawCompte['Montant'], rawCompte['Decouvert']);
    tmpCompte.Id = rawCompte['Id'];
    return tmpCompte;
  }

  public static fromArrayJSON(rawComptes: any[]) : Compte[] {
    return rawComptes.map(Compte.fromJSON);
  }

  public getCleanDataForSending() {
    return {
      "Id": this.Id,
      "Nom": this.Nom,
      "Montant": this.Solde,
      "Decouvert": this.AllowsDecouvert
    };
  }
}

还有我的组件代码：

export class DetailsComponent implements OnInit {

  public detail$: Compte ;

  private id;

  constructor(private route: ActivatedRoute, private _cmptService: CompteService) {
    this.route.params.subscribe( params => this.id = params.id );
  }

  ngOnInit() {


    this._cmptService.getCompte(this.id).subscribe(
      res => { this.detail$ = Compte.fromJSON(res); }
    );

预先感谢;）

Answer 1

getCompte()返回一个Observable<Compte>。

为什么不简单地直接返回Compte？

因为它不能：AJAX请求，如其名称所示，是异步：您发送了一个请求，立即返回了一个可观察的对象，后来，当响应最终返回时，被观察者通知其订户该竞争最终可用。

在整个过程中，将显示该组件，并且其detail$变量仍未初始化，因此其值为undefined。因此，由于模板尝试显示其名称，因此会出现异常。

在模板中，仅显示其中的详细信息：

<div *ngIf="detail">...</div>

此外，将其重命名为detail，或者更好的名称为compte，甚至更好的名称为account。后缀$通常用于可观察类型的变量，而detail$不是可观察的类型。

似乎您来自Java背景，您在其中使用getter和setter进行所有操作。在TypeScript中没有必要：您可以只使用公共字段，如果确实需要它们，则可以切换到getter和setter，而无需更改客户端访问这些属性的方式。名称fromJSON也是一个不好的选择：该方法不使用JSON字符串作为参数。

最后，就像Java中一样，属性通常在TypeScript / JavaScript中以小写字母开头。

具有角度的对象

1 个答案: