* 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"        
} 
]} 

는 또한 I * ngIf = "dataItem.isValid0" 시도. 그것은 여전히 ​​나를 위해 작동하지 않았다.

이 코드는 탐색 메뉴입니다. 이전에는 다음과 같이이었다 : 나는 동적으로 JSON에서 모든 데이터를로드하여 ngFor를 사용하여 코드를 재사용 할

<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> 

.

isBorrowerDataValid는 기본적으로 0이고 사용자가 페이지에서 필요한 모든 데이터를 채우면 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 파일은 다음과 같습니다이 같은

내 전체 구성 요소 모양은

이 뭔가를 표시하는 테스트 기간입니다.