angular4 – 如何在角4.0中隐藏和显示

发布时间：2020-12-17 06:54:55 所属栏目：安全来源：网络整理

导读：我试图在角度4中切换菜单.我有2个独立的组件.一个用于标题布局,第二个用于菜单列表.我在标题布局中单击图标时写了切换功能,我试图隐藏并显示菜单列表.但这不适合我. 以下是我的代码： app.navbarComponent.html文件： header id='sv_header' div class='row'

我试图在角度4中切换菜单.我有2个独立的组件.一个用于标题布局,第二个用于菜单列表.我在标题布局中单击图标时写了切换功能,我试图隐藏并显示菜单列表.但这不适合我.

以下是我的代码：

app.navbarComponent.html文件：

<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文件：

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文件：

<div class='menulist'  >
  <ul>
    <li *ngFor="let menu of menus" [HIDDEN]="!menulist">
      <a href="{{menu.href}}">
        {{menu.name}}
      </a>
    </li>
  </ul>
</div>

任何人都可以帮我解决这个问题.

提前致谢.

解决方法

<div class='menulist'>
  <ul *ngIf="!menulist">
    <li *ngFor="let menu of menus">
      <a href="{{menu.href}}">
        {{menu.name}}
      </a>
    </li>
  </ul>
</div>

你不能把* ngIf和* ngFor放在同一个元素上 – angular不喜欢它

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!