Cách ẩn và hiển thị ở góc 4.0

Question

Tôi đang cố gắng chuyển đổi menu ở góc 4. Tôi có 2 thành phần riêng biệt. Một là dành cho bố trí tiêu đề và thứ hai là dành cho danh sách menu. Tôi đã viết chức năng bật tắt khi nhấp vào biểu tượng trong bố cục tiêu đề và tôi đang cố gắng ẩn và hiển thị danh sách menu. Nhưng điều này không làm việc cho tôi.

Sau đây là mã của tôi:

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 tệp:

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

Bất kỳ ai cũng có thể giúp tôi giải quyết vấn đề này.

Xin cảm ơn trước.

Answer 1

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

Bạn không thể đặt * ngIf và * ngFor trên cùng một nguyên tố - góc không thích nó

Answer 2

Issue cố định.

Vì chúng tôi đang sử dụng hai thành phần khác nhau. Chúng ta phải viết một dịch vụ để nghe sự kiện click.

Đầu tiên chúng ta phải Bind sự kiện nhấp chuột vào INJECTOR được gọi là Dịch vụ trong góc. Sau đó, sử dụng trợ giúp Injector, chúng ta sẽ gọi một hàm trong thành phần khác khi biểu tượng được nhấp vào.