Angular ivy, erreur avec les variables locales du modèle : L'objet est peut-être 'null'.

Question

J'ai le message d'erreur : "Object is possibly 'null'". dans la ligne modal.customWidth.extra_large

Mon code est :

<app-modal
      #modal
      [active]="hasCurrentProduct$ | async"
      [modalWidth]="modal.customWidth.extra_large">

Answer 1

Vous devez vérifier que modal y customWidth ne sont pas nuls avant d'accéder à leurs propriétés.

Changement modal.customWidth.extra_large a modal?.customWidth?.extra_large

Answer 2

Il existe un option strictNullInputTypes qui s'y rapportent (pour les propriétés d'entrée).

Cela a été corrigé quelque peu avec https://github.com/angular/angular/issues/32051

Mais je suis venu avec ça pour certains scénarios :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'default'
})
export class DefaultValuePipe implements PipeTransform {

    constructor() {}

    transform<T>(value: T | null | undefined, defaultValue: T): T {
        return value ?? defaultValue;
    }
}

Il suffit ensuite de l'ajouter après le async

[active]="hasCurrentProduct$ | async | default: false"

Cela rend les choses super claires et aucune de ces absurdités :

[active]="(hasCurrentProduct$ | async) ?? false"

En fait, dans cet exemple, ils sont à peu près identiques, mais des expressions plus complexes peuvent en bénéficier.

<div [style.width.em]="(catsCount$ | async | default: 1) * 30"></div>

You own {{ (cats$ | async | default: []).length }} cats