Javascript 角度8和剑道下拉列表组件：为什么点击下拉列表会导致；“重新计算”；在一个<；天然气集装箱>；用一个*ngFor？

我在Stackblitz上编辑了这段代码（原始链接是Stackblitz的第一个链接，在“原始值”部分：）如下：

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        Selected Value: {{selectedValue}}
    </div>
    <kendo-dropdownlist [data]="listItems" [(ngModel)]="selectedValue"></kendo-dropdownlist>
    <ng-container *ngFor="let item of listItems;">
      <span [ngStyle]="onChangeStyle(item)">{{item}}</span>
    </ng-container>
  `
})
export class AppComponent implements OnInit {
    public listItems: Array<string> = [ "Small", "Medium", "Large" ];
    public selectedValue: string = "Medium";

public ngOnInit() {
   console.log('onInit');
}

onChangeStyle(item) {
  console.log(item);
  return {'color': 'red'}
}

}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“我的应用程序”，
模板：`
选定值：{{selectedValue}}
{{item}}
`
})
导出类AppComponent实现OnInit{
公共列表项：数组=[“小”、“中”、“大”]；
public selectedValue:string=“Medium”；
公共ngOnInit（）{
console.log（'onInit'）；
}
onChangeStyle（项目）{
控制台日志（项目）；
返回{'color'：'red'}
}
}

---

我无法理解为什么单击下拉菜单会为数组中的每个项触发onChangeStyle（）函数；甚至没有选择它。单击下拉列表关闭项目列表时也会发生同样的情况。如控制台上所示，每次单击下拉菜单menù都会导致三次执行console.log（）。

在angular template中使用函数是一种反模式。谷歌it-你会找到大量关于这个问题以及如何解决它的文章（ChangeDetectionStrategy.OnPush或预先计算所有内容），你帮了大忙！我用管子解决了这个问题！非常感谢。