Question

我正在使用Angular CLI。实际上，我有一个菜单列表。我想点击它时更改<li>的背景颜色。我将id发送给changeColor()。但问题是我将menuButton视为null。请帮我这样做。

html的

<ul>
   <li id="menu_btn" (click)="changeColor()" >

   </li>
   <li id="menu_btn" (click)="changeColor()"> 

   </li>
<ul>

.TS：

changeColor() {
    let menuButton = document.getElementById("menu_btn"); 
    menuButton.style.backgroundColor = '#816587';
  }

Answer 1

您可以使用ngStyle执行此操作：

<li id="menu_btn" (click)="myStyle = {'background-color': #816587}" [ngStyle]="myStyle">

Answer 2

更有棱角的方法是在数组中定义菜单列表

// component.ts
menuList = [
    {
        name: 'Option 1',
        isSelected: false
    },
    {
        name: 'Option 2',
        isSelected: false
    }
];

然后使用ngFor渲染列表并使用ngClass +每个菜单项isSelected标记来切换selected类。

// component.html
<ul>
    <li *ngFor="let menuItem of menuList" (click)="changeColor(menuItem)"
        [ngClass]="{'selected': menuItem.isSelected}">
        {{menuItem.name}}
    </li>
</ul>

// component.css
.selected{
    background-color: #816587;
}

现在让你的changeColor方法处理isSelected标志的切换

changeColor(menuItem){
    // toggle off all selected menu items
    this.menuList.forEach(item => {
        if(item.isSelected){
            item.isSelected = false;
        }
    });
    // select clicked menu item
    menuItem.isSelected = true;
}

这样angular会处理所有DOM操作。以下是plnkr演示此功能（https://plnkr.co/edit/NEnzKZ84M85mErYGLE1Y?p=preview）

点击更改<li>样式

2 个答案: