Javascript 具有动态事件绑定和动态函数的角度动态形式

嗨，我是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>

---

我找不到从我的JSON数组中生成带有事件和函数的HTML的方法。

用这种方法是不可能的。角度转换和缩小代码，因此您不知道函数的名称

你的表格是

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（）”时，如果条件为false，请不要执行该函数，否则无法以这种方式执行。角度转换和缩小代码，因此您不知道函数的名称

你的表格是

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（）”时，如果条件为false，请不要执行该函数。我确实找到了解决方案

工作人员突击检查：

我以一个伪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>

---

我确实找到了解决办法

工作人员突击检查：

我以一个伪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>

sample json please？在下面发布了一个解决方案sample json please？在下面发布了一个解决方案