Alireza Valizade Alireza Valizade - 2 months ago 23
Javascript Question

ngfor and ngif use localvariable not working

I'm trying to create a application with angular 2,i have a accordion menu and want templating the menu...
this is my code :

<ul class="category_vl fold-menu" >

<li *ngFor="#wrapper_item_menu of arrayOfKeys">
<a (click)="menu($event)" title="" class="clearfix hv2-category-item">
<b> {{wrapper_item_menu.name}} </b>
<i>۱۴۲</i>
<span class="icon-down-open-big"></span>

</a>
<ul *ngIf="wrapper_item_menu.items">
<li
*ngFor="#submenu of wrapper_item_menu.items"
*ngIf="submenu.name != '_props'" <============== my error is here!
>

<a [routerLink]="['Inside_group_page', {'name':'asdasd' }]" >{{submenu.name}}</a>

</li>
</ul>
</li>




i want say if submenu.name not equal with '_props' and render the item...
but angular throw an error ...
how to fixed it?
thanks

Answer

update

As of 2.0.0 final the canonical form is no longer recommended.

  <template ngFor #submenu [ngForOf]="wrapper_item_menu.items">

should be

  <ng-container *ngFor="let submenu of wrapper_item_menu.items">

This was introduced because the different syntax of ngFor let-foo [ngForOf]="bar" and*ngFor="let foo of bar".

<ng-container> behaves the same as the <template> but allows to use the more common syntax.

original

*ngIf and *ngFor on the same element are not supported but you can just move the *ngIf to the <a ...

<ul *ngIf="wrapper_item_menu.items">
  <li
      *ngFor="#submenu of wrapper_item_menu.items">
    <a *ngIf="submenu.name != '_props'" [routerLink]="['Inside_group_page', {'name':'asdasd' }]"> 
        {{submenu.name}}</a>
  </li>
</ul>

In beta.17 the *ngFor syntax changed a bit (replace # by let):

<ul *ngIf="wrapper_item_menu.items">
  <li
      *ngFor="let submenu of wrapper_item_menu.items">
    <a *ngIf="submenu.name != '_props'" [routerLink]="['Inside_group_page', {'name':'asdasd' }]"> 
        {{submenu.name}}</a>
  </li>
</ul>

or

<ul *ngIf="wrapper_item_menu.items">
  <template ngFor #submenu [ngForOf]="wrapper_item_menu.items">
    <li *ngIf="submenu.name != '_props'">
      <a  [routerLink]="['Inside_group_page', {'name':'asdasd' }]"> 
          {{submenu.name}}</a>
    </li>
  </template>
</ul>

beta.17 syntax

<ul *ngIf="wrapper_item_menu.items">
  <template ngFor let-submenu [ngForOf]="wrapper_item_menu.items">
    <li *ngIf="submenu.name != '_props'">
      <a  [routerLink]="['Inside_group_page', {'name':'asdasd' }]"> 
          {{submenu.name}}</a>
    </li>
  </template>
</ul>

Plunker example

Comments