Angular教程：如何添加按钮点击事件实现数组样式变更？

步骤1：修改组件类（app.component.ts） #

添加样式变量存储目标样式，调整changeFont方法为赋值逻辑，让按钮点击时能更新样式状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  arr=['car','house','beach','microphone'];
  // 初始为空，列表项使用默认样式
  currentStyle: any = {};

  changeFont(){
    // 赋值为目标样式
    this.currentStyle = {'font-size.px':15};
  }
}

步骤2：修改模板（app.component.html） #

添加触发按钮，将[ngStyle]绑定到样式变量，替代原直接调用方法的写法：

<div class="styling">
  <!-- 点击按钮调用changeFont方法更新样式 -->
  <button (click)="changeFont()">设置15px字体</button>
  <ul>
    <li *ngFor="let a of arr" [ngStyle]="currentStyle">
      {{a}}
    </li>
  </ul>
</div>

补充说明 #

• 原[ngStyle]="changeFont()"写法会在Angular变更检测周期内频繁调用changeFont方法，存在性能损耗；改用变量绑定后，仅当样式变量更新时才触发样式变更，更高效。
• 点击按钮后，currentStyle被赋值为目标样式对象，所有列表项会立即应用该样式，实现与原[ngStyle]绑定完全相同的样式效果，只是触发时机从页面加载改为手动点击按钮。

内容的提问来源于stack exchange，提问作者BlackRose