<el-menu model="1" background-color="#1b2637" text-color="#ffffff" active-text-color="#0066ff">
<!--此处ng-container标签是一个虚拟的标签,不会被渲染,是用来避免*ngFor和*ngIf放在同一标签上冲突-->
<ng-container *ngFor="let item of menuArr">
<el-menu-item *ngIf="!item.subMenu.length" [index]="item.index" class="menu-item">
<i [class]="item.iClass"></i>{{item.name}}
</el-menu-item>
<el-submenu *ngIf="item.subMenu.length" [index]="item.index" >
<ng-template #title>
<i [class]="item.iClass"></i>{{item.name}}
</ng-template>
<el-menu-item *ngFor="let subItem of item.subMenu" [index]="subItem.index" class="menu-item">
<i [class]="subItem.iClass"></i>{{subItem.name}}
</el-menu-item>
</el-submenu>
</ng-container>
</el-menu>
如图所示:
1、在angular中*ngFor和*ngIf不能放在同一标签上使用,否则会发生冲突。因此,使用ng-container标签来避免二者的冲突。ng-container标签不会被渲染在页面中,就像vue中的template标签一样。