* ngIfとngClassと動的変数 - 角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

[OK]を、私は、あなたのために良いニュースを持って

が、これはあなたが持っているオブジェクトで考えると思いますので、

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); 
    } 

ここでは、ブール値として評価される文字列を評価できるはずです。このような

私の全体の構成を見て、MY htmlファイルは次のようになります

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); 
    } 
} 

、

これは何かを表示するために、テストスパンです。