* ngIf和ngClass具有动态变量-Angular 4

Question

我正在尝试从json读取值并将值动态加载到ngClass并检查ngIf条件。 当我尝试执行以下操作时，出现错误。 有人能帮我吗？

我还用动态ngIf检查了其他帖子，但这与我的情况无关。

<md-list>
<ng-container *ngFor="let dataItem of navigationData">
<ng-container >
<md-list-item >
<a  [ngClass]="{{dataItem.ngClass}}"routerLink="{{dataItem.routerLink}}" 
routerLinkActive="{{dataItem.routerLinkActive}}"> {{dataItem.display}}
<span *ngIf="{{dataItem.isValid0}}" class="">
<span *ngIf="{{dataItem.isValid1}}" class="margin-left-90px">
<i class="material-icons color-green">{{dataItem.icon}}</i>
</span>
<span *ngIf={{dataItem.isValid2}}></span>
</span>
</a>
</md-list-item>
</ng-container>
</ng-container>
</md-list>

Json结构：

{   
"menu": [       
{
"mdlistIf":"nameData =='3'",
"anchorClass" : "navigationLink menuFont",
"ngClass":  "
{'navigationDisableLink':!IsBorrowerSelectionEnable,'clickDisable':
(isBorrowerSelectionDataValid == 1)}",
"routerLink": "/borrowerselection",
"display" : " Initial Selections",
"routerLinkActive" : "navigationActiveLink",
"isValid0": "isBorrowerSelectionDataValid",
"isValid1": "isBorrowerSelectionDataValid== 1",
"isValid2": "isBorrowerSelectionDataValid== 2",
"icon": "lock"
},              
{
"mdlistIf":"nameData =='3' || nameData =='1'",                  
"anchorClass" : "navigationLink menuFont",
"ngClass":  "{'navigationDisableLink':!IsBorrowerEnable}",
"routerLink": "/borrower",
"display" : "Borrower Information",
"routerLinkActive" : "navigationActiveLink",
"isValid0": "isBorrowerDataValid",
"isValid1": "isBorrowerDataValid== 1",
"isValid2": "isBorrowerDataValid== 2",
"icon": "check_circle"                              
}
]}

我也尝试过* ngIf =“ dataItem.isValid0”。 它仍然对我不起作用。

此代码用于导航菜单。 以前是这样的：

<md-list-item >
<a class="navigationLink menuFont" [ngClass]="
{'navigationDisableLink':!IsBorrowerEnable}" routerLink="/borrower" 
routerLinkActive="navigationActiveLink">
Borrower Information
<span *ngIf="isBorrowerDataValid" class="">
<span *ngIf="isBorrowerDataValid == 1" class="glyphicon glyphicon-ok-circle 
color-green margin-left-55px"><i class="material-icons">check_circle</i>
</span>
<span *ngIf="isBorrowerDataValid == 2" class="glyphicon glyphicon-remove-
circle color-red margin-left-55px"></span>
</span>
</a>
</md-list-item>

我想通过动态加载json中的所有数据来使用ngFor重用代码。

isBorrowerDataValid是一个变量，默认情况下为零，如果用户填写了页面中的所有必需数据，则默认为1，如果部分填写则为2。

Answer 1

好吧，我想我对你来说是个好消息，

认为这是您拥有的对象，

 myObj ={"decision":'2==2'};

现在您希望使用它来显示跨度，这就是您应该如何做，

<span *ngIf=myFunction(myObj.decision)>This is the test span to display something.</span>

现在，在您的组件中，您需要有一个名为myFunction的函数，如下所示，

  myFunction(vwLogic){
    //console.log(eval(vwLogic),"Dj test");
    return eval(vwLogic);
  }

现在它应该能够评估必须评估为布尔值的字符串。

我的整个组件看起来像这样，

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  myObj ={"decision":'2==2'};
  myFunction(vwLog){
    //console.log(eval(vwLog),"Dj test");
    return eval(vwLog);
  }
}

我的html文件看起来像这样，

这是显示某些内容的测试范围。