如何从服务获取组件的价值？

Question

我需要从 currentAccount 获取 currentBalance，但收到错误消息：

错误错误：未捕获（承诺）：类型错误：无法读取未定义的属性 'currentAccount'。

我可以使用 {{ currentAccount.currentBalance }} 在我的 HTML 文件中显示余额，但是当我将其包含到一个函数中时返回未定义状态。如果我用静态数字替换余额，我的功能将完美运行，只是不适用于 currentBalance。

这是我在 TS 文件中的代码：

import { Component, OnInit, Input} from '@angular/core';
import { FormControl, FormGroup, Validators, ValidatorFn, FormBuilder, AbstractControl, ValidationErrors } from '@angular/forms';
import { ICustomerAccount } from 'src/app/customer/interfaces';
import { CustomerService } from 'src/app/customer/services/customer.service';
import { WireErrorComponent } from '../wire-error/wire-error.component';

@Component({
  selector: 'app-wire-start',
  templateUrl: './wire-start.component.html',
  styleUrls: ['./wire-start.component.scss']
})

export class WireStartComponent implements OnInit{
  @Input() currentAccount: ICustomerAccount;
  currentBalance: string;
  maxAmount = 1000000;

  constructor(private dialog: MatDialog,
              private _customerService: CustomerService,
              private formBuilder: FormBuilder
              ) { }

    wireStartForm: FormGroup = this.formBuilder.group({
    purpose: new FormControl('', Validators.required),
    amount: ['', [Validators.max(this.maxAmount), this.customValidatorFn]]
  });

  customValidatorFn(control: AbstractControl): { [key: string]: any } | null {
    const amount: number = control.value;
    const balance: number = Number(this.currentAccount.currentBalance);
    if (balance >= amount) {
      return null;
    } else {
      return {'amountMinError': true}
    }
  }

  ngOnInit(): void {
    this.currentAccount = this._customerService.getSelectedAccount();
  }
}

Answer 1

因为您正在将 currentAccount 值作为组件的输入，所以来自服务的值的绑定可能会正确返回一个值，但 currentAccount 可能具有来自 Input() 的数据集

尝试从调用 app-wire-start 组件的组件（即从父组件）的服务中设置 currentAccount 的数据，并将服务数据作为输入传递给 app-wire-像

这样的启动组件

<app-wire-start [currentAccount]="currentAccountFromService"></app-wire-start>

Answer 2

自定义验证器中 this 的上下文不同。尝试使用 arrrow 函数将 this 的 context 设置为 class。

customValidatorFn = (control: AbstractControl): { [key: string]: any } | null =>{
    const amount: number = control.value;
    const balance: number = Number(this.currentAccount.currentBalance);
    if (balance >= amount) {
      return null;
    } else {
      return {'amountMinError': true}
    }
  }

这是工作示例：Demo

如何从服务获取组件的价值？

How do I get the value from a service to a component?

angular-services

angular