实现ngOnChange以捕获Angular2中的旧值和当前值

Question

我试图实现ngOnChanges（）来捕获先前和当前值。我实现的功能很好。我能够在控制台中看到先前和当前的值，但即使我的代码编译成功，我也会收到此错误。我收到了＆＃34; propertyName＆＃34;，＆＃34;更改＆＃34;，＆＃34;当前＆＃34;和＆＃34;之前＆＃34;。如果我使用＆＃39; const＆＃39;而不是让＃39;然后我的功能不起作用。请帮忙!!

代码：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
selector: 'app-simple',
templateUrl: './simple.component.html'
})
export class SimpleComponent implements OnChanges {
  @Input() simpleInput: string;

  ngOnChanges(changes: SimpleChanges) {
    for (let propertyName in changes) {
    let change = changes[propertyName];
    let current = JSON.stringify(change.currentValue);
    let previous = JSON.stringify(change.previousValue);
    console.log(propertyName + ' : currentvalue ' + current + ', previousvalue ' + previous);
    }
  }
}

Answer 1

还有另一种迭代数组的方法。在高级for循环中使用 。 尝试使用for (let propertyName of changes){} 这可能会对你有所帮助。

EDIT1： 如果永远不会重新赋值变量，那么使用const声明会更好。 https://eslint.org/docs/rules/prefer-const 试试这样：

ngOnChanges(changes: SimpleChanges) {
for (const propertyName in changes) {
  if (changes[propertyName]) {
    const change = changes[propertyName];
    const current = JSON.stringify(change.currentValue);
    const previous = JSON.stringify(change.previousValue);
    console.log(propertyName + ' : currentvalue ' + current + ', previousvalue ' + previous);
  }

}   }

Answer 2

这是一个ESlint错误：https://eslint.org/docs/rules/prefer-const

您的代码将正常工作，因为它以编程方式没有任何问题，这对于我提供的链接中提到的可读性而言并不好。如果您不想看到错误，可以在tslint.json文件中禁用它。您可以手动执行此操作或使用错误对话框中的第三个选项，即从tslint.json＆＃39;删除规则prefer-const。