Angular 7-动态表单并通过传递函数

Question

使用Angular的动态表单，我正在建立一个新的输入字段

form.ts

 usernameCallback(body) {
    console.log(`hello ${body}`);
    this.usernameService.post(body)
       .subscribe(
         data => {
           console.log(data);
         },
         error => {
           console.warn(`Error: ${error}`);
         }
       );
  }

ngOnInit() {

      new InputField({
        key: 'username',
        label: 'Username',
        value: '',
        placeholder: 'Enter username',
        required: true,
        callback: this.usernameCallback
      }),

}

所以这是代码的基础。

我在UsernameService内部有一个方法post()，该方法发送一个http发布请求。

usernameCallback()被添加到InputField并具有类型Function。

在我正在构建表单的 input.component.ts 中

  callback() {
    console.log(this.field.callback);
    this.field.callback('cheddar');
  }

控制台日志从usernameCallback中打印出内容，这很好，但我收到错误消息

  

错误TypeError：无法读取未定义的属性“ post”

似乎无法处理usernameService，但我不知道为什么。