typescript - El tipo 'string | undefined' no se puede asignar al tipo 'string' en la plantilla de Angular 12

Tengo una interfaz con pocas propiedades opcionales

export interface NavigationItem {
  id: string;
  title: string;
  classes?: string;
  badge?: {
    title?: string;
    translate?: string;
    bg?: string;
    fg?: string;
  };
}

En la plantilla, al pasar un valor a las propiedades de entrada

<span *ngIf="item?.badge" [ngStyle]="{'background-color': item?.badge?.bg,'color': item?.badge?.fg}"
          [translate]="item?.badge?.translate"
          class="nav-link-badge">
            {{item?.badge?.title}}
        </span>

Está dando error

Type 'string | undefined' is not assignable to type 'string'

Respuesta #1

Intenta asignar una cadena vacía '' si item?.badge?.bg o item?.badge?.fg son indefinidos. Por ejemplo, item?.badge?.bg || ''

También puedes cambiar '' a algún valor predeterminado que desees. por ejemplo, item?.badge?.bg || 'black'

Tal vez necesites hacerlo también para item?.badge?.translate.

<span *ngIf="item?.badge" [ngStyle]="{'background-color': item?.badge?.bg || '', 'color': item?.badge?.fg || '' }"
          [translate]="item?.badge?.translate"
          class="nav-link-badge">
            {{item?.badge?.title}}
</span>