Question

Lint错误消息：

src / app / detail / edit / edit.component.ts [111,5]：for（... in ...）必须使用if语句
过滤语句

代码段（这是一个有效的代码。它也可以在angular.io form validation section获得）：

for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }

知道如何解决这个lint错误吗？

Answer 1

应用@Helzgate回复的一种更简洁的方式可能是用

替换你的'for .. in'

for (const field of Object.keys(this.formErrors)) {

Answer 2

解释tslint指出的实际问题，引用来自 for...in statement的JavaScript文档：

循环将遍历对象的所有可枚举属性本身和那些对象继承自其构造函数的原型（更接近原型链中对象的属性覆盖原型＆＃39;属性）。

所以，基本上这意味着你将获得你可能不希望获得的属性（来自对象的原型链）。

要解决这个问题，我们只需要遍历对象自己的属性。我们可以通过两种不同的方式完成此操作（如@Maxxx和@Qwertiy所建议的那样）。

第一个解决方案

for (const field of Object.keys(this.formErrors)) {
    ...
}

这里我们使用Object.Keys()方法返回给定对象自身的可枚举属性的数组，其顺序与for ... in循环提供的顺序相同（不同之处在于for-in循环也枚举了原型链中的属性。

第二种解决方案

for (var field in this.formErrors) {
    if (this.formErrors.hasOwnProperty(field)) {
        ...
    }
}

在此解决方案中，我们迭代所有对象的属性，包括其原型链中的属性，但使用Object.prototype.hasOwnProperty()方法，该方法返回一个布尔值，指示对象是否具有指定的属性为拥有（不是继承）属性，以过滤掉继承的属性。

Answer 3

for (const field in this.formErrors) {
  if (this.formErrors.hasOwnProperty(field)) {

for (const key in control.errors) {
  if (control.errors.hasOwnProperty(key)) {

Answer 4

使用Object.keys：

Object.keys(this.formErrors).map(key => {
  this.formErrors[key] = '';
  const control = form.get(key);

  if(control && control.dirty && !control.valid) {
    const messages = this.validationMessages[key];
    Object.keys(control.errors).map(key2 => {
      this.formErrors[key] += messages[key2] + ' ';
    });
  }
});

Answer 5

如果出于您的目的，for（... in ...）的行为是可接受的/必要的，则可以告诉tslint允许它。

在tslint.json中，将其添加到“规则”部分。

"forin": false

否则，@ Maxxx与

有正确的主意

for (const field of Object.keys(this.formErrors)) {

Answer 6

我认为此消息与避免使用switch有关。相反，它希望您检查hasOwnProperty。可以在这里阅读背景：https://stackoverflow.com/a/16735184/1374488

tslint / codelyzer / ng lint错误：“for（... in ...）语句必须使用if语句进行过滤”

6 个答案:

第一个解决方案

第二种解决方案