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

Question

我有一项服务可以拉入菜单项列表并在 *ngFor 中加载这些项。菜单项列表还包括菜单项的状态。

服务

  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 我想删除所有兄弟级子级的活动，并且只激活我单击的按钮，除非我单击顶级而不是只有顶部水平活跃和所有孩子。

• 1
• • 2
• • 3
• • 4

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

Answer 1

您甚至可以通过使用 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 {}

谢谢。

Answer 2

有一种东西叫做事件传播。当您单击子项时，将调用 execCommand(subButton)。但是随后单击事件转到父项并调用 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 {}