2017-11-08 2 views
0

* * ngFor内部で* ngIfを使用する場合は、*そのロールの値がその要素に定義されています。ユーザーがログインしているか、ユーザーが管理者である場合のチェックngOnInit機能イムインサイドAngular2 * ngIf内のオブジェクトからの値を持つ* ngFor

enter code here`export class NaviComponent implements OnInit { 
    naviEntries: NaviEntry[]; 
    visitor: boolean = true; 
    user: boolean = false; 
    admin: boolean = false; 

    constructor() { ... } 

    ngOnInit() { 
     ... 
     this.naviEntries.push({name: 'Home', link: '', role: 'visitor'}); 
     this.naviEntries.push({name: 'User', link: '/user', role: 'user'}); 
     this.naviEntries.push({name: 'Admin', link: '/admin', role: 'admin'}); 
     ... 

<li class="nav-item" *ngFor="let entry of naviEntries"> 
     <button *ngIf="{{entry.role}}" ...>{{entry.name}}</button> 
</li> 

そして、私のコンポーネントの内部:

マイテンプレートはそのように見えます。

今、私は私のコンポーネントで使用される変数としてオブジェクトの値を使用することができます私はNaviEntriesにプッシュオブジェクトをナビ

で表示するように許可されている場合* ngIfに確認したいのですが?

Excample:

NaviEntry =>私のコンポーネント=>管理者で

{name: 'Admin', link: '/admin', role: 'admin'}:ブール=はtrue。

テンプレート:

*ngIf="{{entry.role}}" => * ngIf = "管理者" =>真=>ショー項目

答えて

2

私はあなたのようなものが必要だと思う:お読みください

*ngIf="(entry.role === 'admin' && admin) || (entry.role === 'visitor' && visitor) || (entry.role === 'user' && user)" 

を:

https://angular.io/api/common/NgIf

あなたが使用しているように、間違ったwa y。行うには


最適化された方法:

// component side 
roleAccess = {'admin' : false , 'user' : false , 'visitor' : true} 

// template side 
*ngIf="roleAccess[entry.role]" 
+0

私は、あなたは私がメンターを理解いけないと思う修正されるだろう が、私は異なる役割があります訪問者、ユーザー、管理者、...そしてあなたの方法を管理者を尋ねるだけだ – xQp

+0

あなたはそれぞれの役割を同じ方法でチェックすることができます。どの役割をどのように定義するか、どのように表示するかを定義することはできません。@ xQp ,,,,,,,,,,,,,,,,,,,,,,,,,, –

+0

あなたは私が何を理解するか分からない。私はNaviEntriesでオブジェクトの配列を持っています。それぞれには独自の役割があります。そして、私はその役割を個別に、基本的にチェックしたいのですが、私の質問は、 "Variable"としてオブジェクト値を使うことができるかどうかです。例えば、私のEntryにはentry.role = 'admin'があります。 this.admin = true/false; – xQp