Question

我有一个可选属性很少的接口

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'

Answer 1

如果 '' 或 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>

输入'字符串| undefined' 不可分配给 Angular 12 模板中的类型 'string'

1 个答案: