使用静态对象数组遍历* ngFor不断更新DOM [英] Iterating over *ngFor with a static array of objects constantly updates the DOM

问题描述

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

I have a simple component which iterates over a static array of objects and displays the content. When this component is added into the larger application, the content is displayed correctly but I am unable to register any click events on it. When I inspect the element in chrome using right click -> Inspect I am greeted with the body tag and it doesn't drill down to the individual element as expected.

通过手动导航，检查元素表明该组件正在由DOM不断更新(div标签闪烁).据我了解，由于它是一个静态数组，因此不应检测到任何变化.

By navigating manually, inspecting the element idicates that the component is constantly being updated by the DOM (div tag flashes). By my understanding there shouldn't be any change detected since it is a static array.

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

Changing the object array to a simple string array ['a', 'b', 'c'] behaves as expected and the DOM isn't being updated.

在ngFor之外的模板中添加其他元素不会受到影响，并且不会不断更新.

Adding additional elements the template outside of the ngFor are unaffected and aren't being constantly updated.

我正在使用v2.4.1

I am using 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>

模板

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

推荐答案

正如@seidme所述，每次运行更改检测时都会调用getter，这可能很常见.

As @seidme mentioned the getter is called every time change detection runs, which can be quite often.

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

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

returns a new object instance every time it is called, which causes ngFor to re-render the list.

如果将其更改为

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

get items() {
  return this.items;
}

它将停止重新渲染，因为Angular识别出它具有相同的对象实例，并且没有任何变化，也不需要更新或重新渲染.

it will stop re-rendering, because Angular recognizes it got the same object instance and nothing has changed and nothing needs to be updated or re-rendered.

这篇关于使用静态对象数组遍历* ngFor不断更新DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！