javascript - Angular 8 和 Kendo DropDownList 组件：为什么单击下拉菜单会导致 ngStyle 在使用 *ngFor?

Question

我在 Stackblitz 上编辑了这段代码（原始链接是 Stackblitz 的第一个链接，在“原始值”部分下：https ://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-绑定/）以这种方式：

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

}

我不明白为什么单击下拉菜单会触发数组中每个项目的 onChangeStyle() 函数；甚至没有选择它。单击下拉菜单以关闭项目列表时也会发生同样的情况。如控制台所示，每次单击下拉菜单都会导致执行 3 次 console.log()。

标签： javascriptangularkendo-ui