角度4を使用するクエリパラメータに基づいてメニューアイテムを表示

Question

私は、クエリベースの文字列に基づいてメニューアイテムを表示するために、ロールベースのメニューを作成しています。 URLがフォームhttp://www.something.com/something?type=adminの場合は、Adminsのメニュー項目のみを表示する必要があります。しかし、私のロジックはすべてのメニュー項目を隠しています。予想通り、私はその作業罰金をロジックを使用すると、そのために私は私のheader.component.ts

ngOnInit() { 
    this.route.queryParams 
    .filter(params => params.type) 
    .subscribe(params => { 
     console.log(params); //{type: "admin"} 
     this.type = params.type; 
     console.log(this.type); 

     if(this.type == "admin"){ 
      console.log("ADMIN PAGE");     
       //this.router.navigate(['dashboard'], { queryParams: { type: this.type } }); 
       //this.router.navigate(['dashboard']); 
     }else if(this.type == "national"){ 
      console.log("NATIONAL PAGE"); 
     }else if(this.type == "warrington"){ 
      console.log("WARRINGTON PAGE"); 
     }else if(this.type == "subcontractorAdmin"){ 
      console.log("SUB CONTRACOTR ADMIN PAGE"); 
     }else if(this.type == "subcontractorManager"){ 
      console.log("SUB CONTRACTOR MANAGER PAGE"); 
     }else{ 
      console.log("OTHERS PAGE"); 
     } 
    }); 
    } 

のようなロジックを実装しています。しかし、何が起こるかは、* ngIf = "type = admin"に基づいてメニュー項目を表示および非表示にしようとすると、すべてのメニュー項目が非表示になってしまいます。私のテンプレートコードを見てください。すべてのメニュー項目が隠れている理由

header.component.html

<ul class="nav navbar-nav"> 
       <li routerLinkActive="active" *ngIf="'type' == 'admin';"> 
       <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/dashboard','_self')">Dashboard</a> 
       </li> 
       <li routerLinkActive="active" *ngIf="'type' == 'admin';"> 
        <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/supplier-list','_self')">Suppliers</a> 
       </li> 
       <li routerLinkActive="active" *ngIf="'type' == 'admin';"> 
        <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/compliance-supplier-list','_self')">Compliance</a> 
       </li> 
       <li routerLinkActive="active" *ngIf="'type' == 'admin';"> 
        <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/admin-invoice-list','_self')">Invoicing</a> 
       </li> 
       <li routerLinkActive="active" *ngIf="'type' == 'admin';"> 
        <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/internal-user-list','_self')">User Management</a> 

       </li> 
       <li routerLinkActive="active" *ngIf="'type' == 'admin';"> 
        <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/node/add/upload_weight_csv','_self')">Weight Ticket</a> 

       </li> 
       <li routerLinkActive="active" *ngIf="'type' == 'admin';"> 
       <a routerLink="/searchsupplier">Search</a> 
       </li> 
      </ul> 

は、誰も私を助けることができます。

Answer 1

私は（変数の型の代わりにハードコードさトリング「タイプ」と比較しても、*の末尾にセミコロンを削除ngIfあなたは

<li routerLinkActive="active" *ngIf="type == 'admin'"> 

に

<li routerLinkActive="active" *ngIf="'type' == 'admin';"> 

を変更すべきだと思いますこれは必要ありません）。

Answer 2

これはすべての役割でうまくいきますが、ホームページに移動するとすべてのメニュー項目が非表示になります。

<li routerLinkActive="active" *ngIf="type == 'admin'"> 
        <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/dashboard','_self')">Dashboard</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin' || type == 'national' || type == 'warrington' || type == 'subcontractorAdmin' || type == 'subcontractorManager'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/supplier-list','_self')">Suppliers</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/compliance-supplier-list','_self')">Compliance</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin' || type == 'subcontractorManager'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/admin-invoice-list','_self')">Invoicing</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/internal-user-list','_self')">User Management</a> 

        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/node/add/upload_weight_csv','_self')">Weight Ticket</a> 

        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin' || type == 'national' || type == 'warrington' || type == 'subcontractorAdmin' || type == 'subcontractorManager'"> 
        <a routerLink="/searchsupplier">Search</a> 
        </li>