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 {} 

謝謝。