Question

我正在编写一个应用程序，我需要从方法内部传递ngIf表达式。表达式来自后端服务作为字符串。在Angular 1中，我曾经使用插值来计算字符串，然后传递给ng-if然后用于评估为true或false，请看下面的plunker

已更新

Plunker Angular 1.5 https://plnkr.co/edit/ukGlJvBZyqGvvrmjEZJY?p=preview

但是在Angular 2中，我不能使用* ngIf插值，抛出异常。看下面的代码。我期待没有任何行（Howdy1，Howdy2，Howdy3）在UI上显示为传递相同的表达式。但只有第一个隐藏而不是两个表达式作为字符串变量传递。

我有Angular 2和1.5的plunker代码。如果有人解决了类似的问题，请帮助我。

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular 2 Systemjs start</h1>
    <div *ngIf="map['a']=='b' || map['b']=='a'">Howdy1</div>
    <div *ngIf="logicAsString">Howdy2</div>
    <div *ngIf="showDiv(logicAsString)">Howdy3</div>
    <p>{{logicAsString}}</p>
  `
})
export class AppComponent {

  logicAsString:string ="map['a']=='b' || map['b']=='a'";

  map = {
    a:'a',
    b:'b'
  }

  public showDiv(logic){
    return logic; 
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Plunker Angular 2- https://plnkr.co/edit/YExzpE?p=preview

Answer 1

在JavaScript中使用新的Function语法，您可以将showDiv函数更改为：

public showDiv (logic) {
   let myfunc = new Function ('map', logic);
   let myresult:boolean = myfunc (this.map);
   return myresult;
}

您还必须将logicAsString更改为：

logicAsString:string = "if (map['a'] == 'c') return true; return false;"

所以它会将布尔值返回给调用者。这实际上只包装了你现有的logicAsString，所以你甚至可以在showDiv函数中执行此操作。

这并不使用很多人不喜欢的eval。

希望它有所帮助！

Answer 2

最好的解决方案是从服务器输出表达式作为原始HTML，然后你可以简单地做：

<div *ngIf="SERVEROUTPUT"></div>

或者您需要使用javascript原生的eval function。

Answer 3

JavaScript中的eval函数将用于执行您在上面创建的logicAsString。

<div *ngIf="eval(logicAsString)">Howdy2</div>
<div *ngIf="eval(showDiv(logicAsString))">Howdy3</div>

Eval是很多人不喜欢但至少有效的功能。 JavaScript有一个新的函数语法，我使用但无法找到神奇的语法，使它在这里工作，你可能会发现它更容易接受。

如果我可以使新功能发挥作用，我也会发布该答案。

此解决方案允许您根据需要构建logicAsString，并允许在运行时修改它。它对解决方案来说是一个加分，但从安全角度来看也是一个减号。

使用Angular 2评估服务器中的表达式

3 个答案: