javascript - ngfor 和 ngif 使用局部变量不起作用

Question

我正在尝试创建一个 Angular 为 2 的应用程序，我有一个 Accordion 菜单并且想要模板化菜单...这是我的代码:

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

我想说如果 submenu.name 不等于 '_props' 并渲染项目...但是 Angular 抛出错误...如何修复它？谢谢

Answer 1

更新

从 2.0.0 final 开始，不再推荐规范形式。

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

应该是

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

这是因为 ngFor let-foo [ngForOf]="bar" and 的语法不同而引入的。 *ngFor="let foo of bar".

<ng-container>行为与 <template> 相同但允许使用更常见的语法。

原创

*ngIf和 *ngFor不支持在同一元素上，但您可以移动 *ngIf到 <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>

在 beta.17 中 *ngFor语法略有改变(将 # 替换为 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>

或

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

<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