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文件看起来像这样，

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

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

1 个答案: