Question

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

模板

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

Answer 1

您正在将getter传递给*ngFor指令。 get语法将对象属性绑定到一个函数，该函数将在查找该属性时调用（每次Angular运行更改检测时），在您的情况下总是返回一个新的数组对象（引用更改），强制Angular重新呈现列表。

Answer 2

正如@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会识别出它有相同的对象实例并且没有任何变化，也不需要更新或重新渲染。

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

2 个答案: