Question

我试图用角度2创建一个应用程序，我有一个手风琴菜单，想要模板化菜单...... 这是我的代码：

 <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不等于＆＃39; _props＆＃39;并渲染项目...... 但角度抛出错误...... 怎么修好呢？感谢

Answer 1

<强>更新

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

  <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 =＆＃34;使用foo of bar＆＃34;的不同语法。

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

在测试版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

Answer 2

您还可以使用结构指令的扩展语法（与*前缀一起使用的语法）：

<template [ngIf]="submenu.name != '_props'">
  <li *ngFor="#submenu of wrapper_item_menu.items">
    (...)
  </li>
</template>

这样您就可以为HTML保持相同的结构......

ngfor和ngif使用localvariable无法正常工作

2 个答案: