Mensagem de erro do fiapo:
src / app / detail / edit / edit.component.ts [111, 5]: as instruções for (... in ...) devem ser filtradas com uma instrução if
Fragmento de código (é um código funcional. Também está disponível na seção de validação de formulário angular.io ):
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] + ' ';
}
}
}
Alguma idéia de como corrigir esse erro de cotão?
angular
angular2-forms
angular-cli
tslint
choopage - Jek Bao
fonte
fonte
Respostas:
Para explicar o problema real que o tslint está apontando, uma citação da documentação JavaScript do for ... na declaração :
Então, basicamente, isso significa que você obterá propriedades que você não esperaria obter (da cadeia de protótipos do objeto).
Para resolver isso, precisamos iterar apenas sobre as propriedades do próprio objeto. Podemos fazer isso de duas maneiras diferentes (como sugerido por @Maxxx e @Qwertiy).
Primeira solução
Aqui, utilizamos o método Object.Keys () que retorna uma matriz das propriedades enumeráveis de um determinado objeto, na mesma ordem que a fornecida por um loop for ... in (a diferença é que um loop for enumera propriedades em a cadeia de protótipos).
Segunda solução
Nesta solução, iteramos todas as propriedades do objeto, incluindo as da cadeia de protótipos, mas usamos o método Object.prototype.hasOwnProperty () , que retorna um booleano indicando se o objeto tem a propriedade especificada como propriedade própria (não herdada), para filtrar as propriedades herdadas.
fonte
Object.keys
é o ES5. A única coisa do ES6 é o loop for-of. Podemos iterar a matriz no loop usual de 0 a seu comprimento e seria ES5.this.formErrors
é nulo,for...in
apenas não faça nada, enquantofor ... of Object.keys()
lançaria erro.Object.keys(obj).forEach( key => {...})
?Uma maneira mais clara de aplicar a resposta do @ Helzgate é possivelmente substituir o seu 'for .. in' por
fonte
if (this.formErrors.hasOwnProperty(field))
.fonte
use Object.keys:
fonte
Se o comportamento de for (... em ...) for aceitável / necessário para seus propósitos, você pode dizer ao tslint para permitir isso.
no tslint.json, adicione isso à seção "rules".
Caso contrário, o @Maxxx tem a ideia certa com
fonte
Eu acho que esta mensagem não é sobre como evitar o uso
switch
. Em vez disso, deseja que você verifiquehasOwnProperty
. O plano de fundo pode ser lido aqui: https://stackoverflow.com/a/16735184/1374488fonte