Объект с угловым - PullRequest
Новая
       8

Объект с угловым

0 голосов
/ 06 января 2019

Я занимаюсь разработкой небольшого приложения Angular, которое предназначено для перечисления банковских счетов и возможности манипулировать ими с помощью CRUD (есть также транзакции). Но вот проблема для меня, и я действительно не понимаю, почему. Когда я нажимаю на одну из перечисленных учетных записей, она отправляет меня на другую страницу, содержащую сведения об учетной записи (Баланс, Имя, ...), однако я хорошо настроил (по крайней мере, я предполагаю) Get (id) с ним Я получаю объект, который затем позволяет мне манипулировать данными. Но это не работает, и я всегда получаю ту же ошибку, что и здесь:

Error

Есть моя учетная запись (Get (id), который я использую HttpClient): 

 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); }
    );

Спасибо заранее;)

1 Ответ

0 голосов
/ 06 января 2019

getCompte() возвращает Observable<Compte>.

Почему он просто не возвращает Compte напрямую?

Поскольку он не может: AJAX-запросы, как показывает их имя, асинхронны : вы отправляете запрос, немедленно возвращаете наблюдаемое и намного позже, когда ответ, наконец, возвращается, observable уведомляет своего подписчика, что compte наконец доступен.

В течение всего этого времени компонент отображается, а его переменная detail$ еще не инициализирована и поэтому имеет значение undefined. Итак, поскольку шаблон пытается отобразить свое имя, вы получаете исключение.

В шаблоне отображать детали, только если они есть: 

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

Кроме того, переименуйте его в detail или лучше: compte или даже лучше: account. Суффикс $ обычно используется для переменных типа Observable, а detail$ не является наблюдаемым.

Кажется, вы пришли из Java-фона, где вы используете геттеры и сеттеры для всего. В TypeScript нет необходимости: вы можете просто использовать открытые поля и переключаться на методы получения и установки, если они действительно необходимы, без изменения способа доступа клиентов к этим свойствам. Имя fromJSON также является плохим выбором: метод не принимает строку JSON в качестве аргумента.

Наконец, как и в Java, свойства обычно начинаются со строчной буквы в TypeScript / JavaScript.

...