我正在尝试在 angular 4 中切换菜单.我有 2 个独立的组件.一个用于标题布局，第二个用于菜单列表.我已经编写了单击标题布局中的图标时的切换功能，并且我试图隐藏和显示菜单列表.但这对我不起作用.
以下是我的代码:
app.navbarComponent.html 文件:
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col'><img src='{{ logo }}' alt='Savaari'/></a><div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col supportHolder'><img src='{{ customercare }}' alt='24X7 Customer Care Support'/>
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right col loginHolder'><a class='user_login' (click)='toggleMenu()'><img src='{{ signin }} ' alt='signin'/><span>登录</span></a>
</标题>
app.navbarComponent.ts 文件:
import { Component } from '@angular/core';@成分({选择器:'导航栏'，templateUrl: './app.navbarComponent.html'})导出类 NavbarComponent {菜单列表:布尔值 = 假；logo = '../assets/img/logo.png';customercare = '../assets/img/cc-support.png';signin = '../assets/img/signin.png';切换菜单():无效{this.menulist = !this.menulist;警报(this.menulist)；}}app.menuComponent.html 文件:
谁能帮我解决这个问题.
提前致谢.
<ul *ngIf="!menulist"><li *ngFor="let menu of menu"><a href="{{menu.href}}">{{menu.name}}</a>你不能把 *ngIf 和 *ngFor 放在同一个元素上 - angular 不喜欢它
I am trying to toggle menu in angular 4. I have 2 separate components. One is for header layout and second one is for menu list. I have written toggle function on click of icon in the header layout and I am trying to hide and show the menu list. But this is not working for me.
Following are my code:
app.navbarComponent.html file:
<header id='sv_header'>
<div class='row'>
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col'>
<a href='' class='logo'>
<img src='{{ logo }}' alt='Savaari' />
</a>
</div>
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col supportHolder'>
<img src='{{ customercare }}' alt='24X7 Customer Care Support' />
</div>
<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right col loginHolder'>
<a class='user_login' (click)='toggleMenu()'>
<img src='{{ signin }} ' alt='signin' />
<span>Sign In</span>
</a>
</div>
</div>
</header>
app.navbarComponent.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'navbar',
templateUrl: './app.navbarComponent.html'
})
export class NavbarComponent {
menulist: boolean = false;
logo = '../assets/img/logo.png';
customercare = '../assets/img/cc-support.png';
signin = '../assets/img/signin.png';
toggleMenu(): void {
this.menulist = !this.menulist;
alert(this.menulist);
}
}
app.menuComponent.html file:
<div class='menulist' >
<ul>
<li *ngFor="let menu of menus" [HIDDEN]="!menulist">
<a href="{{menu.href}}">
{{menu.name}}
</a>
</li>
</ul>
</div>
Can anyone help me to resolve this.
Thanks in advance.
<div class='menulist'>
<ul *ngIf="!menulist">
<li *ngFor="let menu of menus">
<a href="{{menu.href}}">
{{menu.name}}
</a>
</li>
</ul>
</div>
You can't put *ngIf and *ngFor on the same element - angular does not like it
这篇关于如何在 Angular 4.0 中隐藏和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！