使用静态对象数组迭代 *ngFor 不断更新 DOM

我有一个简单的组件，它迭代对象的静态数组并显示内容。当将此组件添加到较大的应用程序中时，内容会正确显示，但我无法在其上注册任何单击事件。当我使用 chrome 检查元素时right click -> Inspect我看到了 body 标签，但它并没有按预期深入到单个元素。

通过手动导航，检查元素表明该组件不断由 DOM 更新（div 标签闪烁）。根据我的理解，不应该检测到任何更改，因为它是静态数组。

将对象数组更改为简单的字符串数组['a', 'b', 'c']行为符合预期，并且 DOM 未更新。

添加额外的元素，ngFor 之外的模板不受影响，并且不会不断更新。

我使用的是v2.4.1

简化组件

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

@Component({
	selector: 'app-ngfor-test',
	templateUrl: './ngfor-test.component.html',
	styleUrls: ['./ngfor-test.component.css']
})
export class NgforTestComponent {
	
	get items() {
		return [
			{
				'label': 'a',
				'value': 'first'
			},
			{
				'label': 'b',
				'value': 'second'
			},
			{
				'label': 'c',
				'value': 'third'
			}
		];
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Template

<div class="item-container" *ngFor="let item of items">
	<label>{{ item.label | uppercase }}</label>
	<span>{{ item.value }}</span>
</div>

正如 @seidme 提到的，每次运行更改检测时都会调用 getter，这可能很频繁。

get items() {
    return [
        {
            'label': 'a',
            'value': 'first'
        },
        {
            'label': 'b',
            'value': 'second'
        },
        {
            'label': 'c',
            'value': 'third'
        }
    ];
}

每次调用都会返回一个新的对象实例，这会导致ngFor重新呈现列表。

如果你把它改成

items = [
        {
            'label': 'a',
            'value': 'first'
        },
        {
            'label': 'b',
            'value': 'second'
        },
        {
            'label': 'c',
            'value': 'third'
        }
    ];

get items() {
  return this.items;
}

它将停止重新渲染，因为 Angular 认识到它获得了相同的对象实例，并且没有任何更改，也不需要更新或重新渲染。