具有动态事件绑定和动态函数的 Angular 动态表单答案

【问题标题】：Angular Dynamic Form with Dynamic Event Binding With Dynamic Function具有动态事件绑定和动态函数的 Angular 动态表单
【发布时间】：2020-05-29 11:42:39
【问题描述】：

嗨，我是 Angular 的新手，我需要制作一些使用 JSON 呈现表单的东西，并且 JSON 也具有所有事件和功能。这是我的 Html 组件

    <div *ngFor="let form of forms; index as i ">
    <div *ngIf="form.type == 'input'">
        <input  type="text" value="{{ form.value }}" ("{{form.event}}") = "{{form.function}}"/>

    </div>
</div>

这是我的 TS 文件，

    @Component({
      selector: 'app-form',
      templateUrl: './form.component.html',
      styleUrls: ['./form.component.scss']
    })
    export class FormComponent implements OnInit {

      forms: any
      constructor() { }

  ngOnInit(): void {
      this.forms = [
        {
          'type' : 'input',
          'value' : '123',
          'event' : 'click',
          'function' : 'show',
        },

      ]

  }
   show(a,b){
    console.log('hello');
  }

}

我找不到使用 JSON 数组中的事件和函数生成 HTML 的方法。

【问题讨论】：

请提供 json 示例？
在下面发布了解决方案

标签： javascript angular forms

【解决方案1】：

这是不可能的。 Angular 转译和缩小代码，所以你不知道函数的名称

方式是你的表单是

this.forms = [
        {
          'type' : 'input',
          'value' : '123',
          'event' : 'click',
          'function' : this.show,
        },

看到“function”就是函数“this.show”

你的输入可以是这样的

<div *ngIf="form.type == 'input'">
        <input  type="text" [ngValue]="form.value" 
          (click)="form.event=='click' && form.function($event)"
          (blur)="form.event=='blur' && form.function($event)"
          (focus)="form.event=='focus' && form.function($event)"
        />
</div>

看到你使用(event)="condition && function()"的时候，如果条件为假就不要执行函数

【讨论】：

【解决方案2】：

我确实找到了解决方案。

工作 Stackblitz :- https://stackblitz.com/edit/angular-kecqvt

我使用了一个虚拟 JSON 作为示例。

[{
   "type":"input",
   "value":"3",
   "event":"change",
   "function":"/Function(function (value) { console.log(value); })/"
}]

我将 json 转换为 js 对象，例如：-

public forms = JSON.parse(this.formJSON, function(key, value) {
  if (typeof value === "string" &&
      value.startsWith("/Function(") &&
      value.endsWith(")/")) {
    value = value.substring(10, value.length - 2);
    return (0, eval)("(" + value + ")");
  }
  return value;
});

我的 HTML :-

<div *ngFor="let form of forms; index as i ">
    <div *ngIf="form.type == 'input'">
        <input  type="text" [value]="form.value" (change) = "form['event'] === 'change' && form['function']($event.target.value)" 
        (blur) = "form['event'] === 'blur' && form['function']($event.target.value)"/>
    </div>
</div>

【讨论】：