如何在 Angular 4.0 中隐藏和显示 [英] How hide and show in angular 4.0

问题描述

我正在尝试在 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 中隐藏和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！