Angular *ngIf 在外部 JSON 文件中具有可变条件

Question

我正在尝试根据从外部 JSON 文件获得的变量向 div 添加 ngIf 条件。

这是 JSON 文件的样子：

{
    steps: [
        {
            step: 'Step 1',
            condition: "selectedValue === 'village'"
        },
        {
            step: 'Step 2',
            condition: "language === 'english'"
        }
    ]
}

所以我想要实现的是：

<div *ngFor="let step of steps">
    <ng-container *ngIf="step.condition">
        {{ step.step }}
    </ng-container>
</div>

但我认为因为条件是字符串值，ngIf 没有正确处理它。

我什至尝试过字符串插值类型的东西，但是唉

condition: "${language} === 'english'"

有没有什么办法可以达到这个预期的效果。

Answer 1

您必须评估 javascript 代码并执行它。例子

HTML

<div *ngFor="let step of steps">
  <ng-container *ngIf="evaluate(step.condition)">
    {{ step.step }}
  </ng-container>
</div>

TS

evaluate(con: string) {
  return eval(con);
}

Angular *ngIf 在外部 JSON 文件中具有可变条件

Angular *ngIf with variable condition in external JSON file

angular

conditional-statements

angular-ng-if