Angular 2：函数中的[ngClass]更新条件

Question

我有一个拉菜单项列表的服务，并在* ng中加载项目。菜单项目列表还包括菜单项目的状态。

服务

buttonlist = [ 
      {id: 1, menu: 'me', status: 'active',children: 2,3,4 }, 
      {id: 2, menu: 'home', status: 'nonactive'}, 
      {id: 3, menu: 'contact', status: 'nonactive'}, 
      {id: 4, menu: 'location', status: 'nonactive'} 
]; 

组件

<ul> 
    <li *ngFor="let button of buttons " [ngClass]="'active' == buttons[subButton].status ? 'active' : 'hide'" 
(click)="execCommand(button)" 
> 

    {{button.id}} 

     <ul *ngFor="let subButton of button.children " > 
     <li 
     (click)="execCommand(button)" 
     [ngClass]="'active' == buttons[subButton].status ? 'active' : 'hide'" 
> 
      {{buttons[subButton].status}} </li> 
     </ul> 

    </li> 
</ul> 

组件功能

execCommand(button){ 
button.status = 'non-active'; 
} 

如果我登录按钮状态。它只表示我已经更新了对象数据，但它没有被渲染。如何使这个按钮更新状态显示活动类？

我的菜单基本上是ID 1是顶级，其余的都是儿童，onclick我想删除所有兄弟姐妹的活动，只有活跃的按钮，我点击，除非我点击顶级比只是有顶级活跃和所有的孩子。

我没有使用路由，因为我有一个页面应用程序与几个级别的菜单项，如果用户单击它加载选项卡。

Answer 1

有一件事叫做事件传播。当你点击子项目时，execCommand(subButton)正在被调用。但是，然后click事件转到父项并调用execCommand（button），因此它使所有子项active=false。这就是为什么我在点击处理程序中添加了(click)="execCommand(subButton, $event)"和$event.stopPropagation()。

import { Component, NgModule, OnInit } from '@angular/core'; 
 
import { BrowserModule } from '@angular/platform-browser'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
<ul> 
 
    <li *ngFor="let button of buttons " [ngClass]="button.active ? 'active' : 'hide'" 
 
(click)="execCommand(button, $event)" 
 
> 
 

 
    {{button.id}}(active: {{button.active|json}}) 
 

 
     <ul *ngIf="button?.children" style="z-index: -1;" > 
 
     <li *ngFor="let subButton of button.children" 
 
     (click)="execCommand(subButton, $event)" 
 
     [ngClass]="subButton.active ? 'active' : 'hide'"> 
 
      {{button.id}}(active: {{subButton.active|json}}) 
 
     </li> 
 
     </ul> 
 

 
    </li> 
 
</ul> 
 
    ` 
 
}) 
 
export class App implements OnInit { 
 
    buttons = [ 
 
    {id: 1, menu: 'me', active: true, children: [ 
 
     {id: 5, menu: 'sublvl1', active: false}, 
 
     {id: 6, menu: 'sublvl2', active: false}, 
 
     {id: 7, menu: 'sublvl3', active: false}, 
 
     ] }, 
 
    {id: 2, menu: 'home', active: false}, 
 
    {id: 3, menu: 'contact', active: false}, 
 
    {id: 4, menu: 'location', active: false} 
 
    ]; 
 
    constructor() {} 
 
    
 
    ngOnInit() {} 
 
    
 
    execCommand(button: any, $event){ 
 
    $event.stopPropagation(); 
 
    this.buttons.forEach(b => { 
 
     b.active = false; 
 
     b.children && b.children.forEach(b => b.active = false); 
 
    }); 
 
    button.active = true; 
 
    } 
 
} 
 

 
@NgModule({ 
 
    imports: [ BrowserModule ], 
 
    declarations: [ App ], 
 
    bootstrap: [ App ] 
 
}) 
 
export class AppModule {}

Answer 2

你甚至可以通过使用条件类简化这一代码属性angular2。 请通过这个plunkr链接：https://plnkr.co/edit/9ayyAl?p=preview

app.component.ts

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: `<div><h2>Hello</h2></div> 
       <ul> 
        <li *ngFor="let button of buttons" (click)="execCommand(button, $event)"> 
        <a class="menu" [class.active]="button.active">{{button.id}}-{{button.menu}}</a>   
         <ul *ngIf="button.children" style="z-index: -1;" > 
         <li *ngFor="let subButton of button.children" (click)="execCommand(subButton, $event)"> 
          <a class="menu" [class.active]="subButton.active"> 
       {{subButton.id}}-{{subButton.menu}}</a> 
         </li> 
         </ul> 
       </li> 
      </ul>` 
    }) 
    export class App implements OnInit { 
     buttons = [ 
      {id: 1, menu: 'me', active: true, children: [ 
       {id: 5, menu: 'sublvl1', active: false}, 
       {id: 6, menu: 'sublvl2', active: false}, 
       {id: 7, menu: 'sublvl3', active: false}, 
       ] }, 
      {id: 2, menu: 'home', active: false}, 
      {id: 3, menu: 'contact', active: false}, 
      {id: 4, menu: 'location', active: false} 
      ]; 

    constructor() {} 

    ngOnInit() {} 

    execCommand(button: any, $event){ 
      $event.stopPropagation(); 
      this.buttons.forEach(b => { 
       b.active = false; 
       b.children && b.children.forEach(b => b.active = false); 
      }); 
    button.active = true; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 

export class AppModule {} 

谢谢。