使用Angular @Input装饰器时，无法将Typescript类型'string'赋给类型

64jmpszr 于 2022-11-18 发布在 TypeScript

关注(0)|答案(2)|浏览(159)

我的问题与Angular @Input()装饰器有关，因为当我使用这个装饰器时，typescript抛出错误，而不是在常规代码中使用时。
在我的child.component.ts文件中，我声明了这个装饰器来从父组件中获取属性：

@Input() customColumns: {
    name: string;
    index: number;
    type: 'icon' | 'image' | 'link' | 'button';
    icon?: any;
    url?: string;
  }[] = [];
  indexList: number[] = [];

在我的parent.component.ts文件中，我为这个变量赋值如下：

customColumns = [
    { name: 'permissions', index: 7, type: 'icon', icon: faSave },
    { name: 'price list', index: 6, type: 'link', icon: faArrowDownWideShort },
    { name: 'details', index: 5, type: 'button', icon: faArrowUpWideShort },
  ];

最后，在我的parent.component.html文件中，我将调用该子组件：

<app-child [customColumns]="customColumns">
</app-child>

但我得到这个错误：
属性'type'的型别不相容。
类型'string'无法指派给类型'“button”|“链接”|“影像”|“图标”'。
但是当我在正常的typescript或ngOnInit（）函数中做同样的事情时，它正在工作，不能弄清楚为什么会发生这种情况，请帮助我，提前感谢。

let customColumns: {
      name: string;
      index: number;
      type: 'icon' | 'image' | 'link' | 'button';
      icon?: any;
      url?: string;
    }[] = [];

    customColumns = [
      { name: 'permissions', index: 7, type: 'link', icon: '' },
      {
        name: 'price list',
        index: 6,
        type: 'icon',
        icon: faArrowDownWideShort,
      },
      { name: 'details', index: 5, type: 'icon', icon: faArrowUpWideShort },
    ];

我的项目相依性：

"@angular/cli": "~14.2.7",
"typescript": "~4.7.2"

typescript

来源：https://stackoverflow.com/questions/74440616/when-using-angular-input-decorator-typescript-type-string-is-not-assignable

2条答案

按热度按时间

v7pvogib1#

为了在普通TypeScript中复制相同的行为，您应该使用以下方案：

let customColumns: {
  name: string;
  index: number;
  type: 'icon' | 'image' | 'link' | 'button';
  icon?: any;
  url?: string;
}[] = [];

const anotherValue =  [
  { name: 'permissions', index: 7, type: 'link', icon: '' },
  {
    name: 'price list',
    index: 6,
    type: 'icon',
  },
  { name: 'details', index: 5, type: 'icon', icon: '' },
];
customColumns = anotherValue;

这类似于Angular 类型检查代码。
为了解决这个问题，您可以使用预定义的枚举：

const enum ColumnType {
  icon = 'icon',
  image = 'image',
  link = 'link',
  button = 'button',
}

let customColumns: {
  name: string;
  index: number;
  type: ColumnType;
  icon?: any;
  url?: string;
}[] = [];

...
type: ColumnType.link,

或as const：

type: 'link' as const

赞(0）回复(0）举报 2022-11-18

polhcujo2#

请试试这个
1.创建这样的类

export class CustomColumns {
constructor(
public name?: string,
public index?: number,
public type?: 'icon' | 'image' | 'link' | 'button',
public icon?: any,
public url?: string
){}
}

2.并在子组件中这样使用

@Input() customColumns: CustomColumns;

赞(0）回复(0）举报 2022-11-18

我来回答

使用Angular @Input装饰器时，无法将Typescript类型'string'赋给类型

2条答案

相关问题

热门标签

最新问答