typescript - نوع 'string | undefined' قابل اختصاص به نوع 'string' در قالب Angular 12 نیست

من یک رابط با چند ویژگی اختیاری دارم

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

در قالب، هنگام ارسال مقدار به ویژگیهای ورودی

<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>

این خطا میدهد

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

پاسخ شماره ۱

سعی کنید که یک رشته خالی '' اختصاص دهید اگر item?.badge?.bg یا item?.badge?.fg تعریف نشده باشد. مثلاً item?.badge?.bg || ''

شما همچنین میتوانید '' را به هر مقدار پیشفرضی که میخواهید تغییر دهید. به عنوان مثال item?.badge?.bg || 'black'

ممکن است شما نیاز داشته باشید این کار را برای 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>