Angular ngIF: 取变量值作为条件

Question

我正在尝试将输入从背面绑定到正面并遇到一个问题：为避免疯狂的解析练习，我可以使用 income 变量作为 *ngIf 指令的条件吗？像这样：

    <div *ngFor="let ban of banners">
        <div *ngIf="ban.view_condition">
            <a [href]="ban.url" target="_blank">
                <img [src]="ban.img_url" [alt]="ban.title">
            </a>
        </div>
    </div>

在 ban.view_condition 中，我试图传递如下内容： "(parameterN == true || size > 5)"

所以我的想法是从后端传递我要检查的属性集，并基于此结果 - 显示或不显示横幅。主要目标 - 避免手动验证。

示例：（这就是我从后面收到的） ban.view_condition = "app.size==10||userName=='test'";

基本上我想取值并得到类似的东西： *ngIf="app.size==10||userName=='test'" 最后。

可行吗？当然，我知道所有目标属性都需要出现在组件中。感谢您的任何意见或想法！

Answer 1

您可以只调用一个方法并根据您当前的禁令项目评估结果应该是什么。

<div *ngFor="let ban of banners">
        <div *ngIf="calculateShow(ban)">
            <a [href]="ban.url" target="_blank">
                <img [src]="ban.img_url" [alt]="ban.title">
            </a>
        </div>
    </div>

public calculateShow(ban: any){
//call backend
//decide if you wish to return true or false here
}

Basically I want to take the value and get something like: *ngIf="app.size==10||userName=='test'" in the end.

是的，这是绝对可行的，考虑到 app.size 和用户名作为字段存在于您的 .ts 文件中

Answer 2

我建议在控制器中创建一个函数来确定是否应显示横幅。

但是，如果您仍想将该字符串作为实际代码进行评估。您可以使用 eval 函数。

evaluate(condition: string) {
    // eval(condition) will evaluate javascript code and execute it.
    return eval(condition);
}

此外，您必须确保条件中的任何属性确实存在。（有效javascript）

我仍然认为这不是最好的方法，您应该重新考虑您的设计。

Angular ngIF: 取变量值作为条件

Angular ngIF: take variable value as condition

javascript

angular

angular-ng-if