如何在角度4中以动态形式设置ngIf动态条件

我正在创建一个动态表单，在其中根据 JSON 的响应动态填充字段。

Eg:-

[{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"fname",
  "visibility":true
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"lname",
  "visibility":"fname == 'abc' || fname == 'xyz'"
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"fid",
  "visibility":true
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"lid",
  "visibility":"fid == 1 || fid == 4"
}]

我有一个用例，其中第二个字段仅当第一个字段应具有值“abc”或“xyz”时才可见（条件写在 JSON 属性中）。如何动态实现这一点？

Create evaluation组件中的方法：

 isVisible(value){
    //console.log(eval(value));
    return eval(value); 
  }

并在模板中这样调用它：

<div *ngIf="isVisible(question.visibility)">
        <label [attr.for]="question.key">{{question.label}}</label>
        <div [ngSwitch]="question.controlType">
            <input [name]="question.key" *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type">

            <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
      <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
    </select>
        </div>
        <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
    </div>

Your json文件将类似于：

 ...
 new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        value: 'Bombasto',
        required: true,
        order: 1, 
        visibility: 'true'
      }),

      new TextboxQuestion({
        key: 'emailAddress',
        label: 'Email',
        type: 'email',
        order: 2,
        visibility: 'this.form.get("firstName").value ==="abc"'
      })

visibility: 'this.form.get("firstName").value ==="abc"'，如你所见，你应该写在json像往常一样在组件类逻辑中，因为它将在组件上下文中运行

代码示例 https://stackblitz.com/edit/angular-dynamic-forms-with-conditions