Evite o operador de navegação segura em Angular

O Safe Navigation Operator , também conhecido como Elvis Operator , pode ajudar a reduzir o código, garantindo que um objeto não seja nulo antes de acessar uma propriedade dele. Considere esta classe e componente:

class ElvisTest {
    public key = true;
}

@Component({
    moduleId: module.id,
    selector: 'elvis-test',
    templateUrl: 'elvis-test.component.html'
})
export class ElvisTestComponent {
    @Input() elvisTest?: ElvisTest;
}

Como uma instância de ElvisTesté passada para o componente como um Input, ela pode permanecer indefinida. Dessa forma, poderíamos usar o operador Elivs para evitar erros de IU:

<div>{{elvisTest?.key}}</div>

No entanto, esse operador também lidará com undefinedpropriedades, o que significa que isso também funciona:

<div>{{elvisTest?.unknownKey}}</div>

Isso pode se tornar um grande problema ao refatorar o código. Se ElvisTestfor modificado da seguinte forma:

class ElvisTest {
    public renamedKey = true;
}

… um compilador AoT ainda compilará o modelo e não lançará um erro para nos informar que estamos acessando uma propriedade inexistente! Plug-ins para IDEs como o VS Code também não alertam sobre esse problema.

Para evitar isso, tente e certifique-se de que suas propriedades não sejam anuláveis ​​sempre que possível – use, por exemplo, Redux sobre entradas sempre que possível – e evite o operador Elvis:

<!-- Output element with no content. -->
<div>{{elvisTest && elvisTest.renamedKey}}<div>

<!-- Hide element entirely. -->
<div *ngIf="elvisTest">
    {{elvisTest.renamedKey}}
<div>