[英]When using Angular @Input decorator, Typescript Type 'string' is not assignable to type
My problem is related to Angular @Input()
decorator, as when I am using this decorator, typescript throwing error, not when using in regular code.我的问题与 Angular @Input()
装饰器有关,因为当我使用此装饰器时,typescript 抛出错误,而不是在常规代码中使用时。
In my child.component.ts
file I am declaring this decorator to get props from parent component:在我的child.component.ts
文件中,我声明了这个装饰器以从父组件获取道具:
@Input() customColumns: {
name: string;
index: number;
type: 'icon' | 'image' | 'link' | 'button';
icon?: any;
url?: string;
}[] = [];
indexList: number[] = [];
And in my parent.component.ts
file I am assigning the value for this variable like this:在我的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 },
];
Lastly, in my parent.component.html
file I am calling that child component:最后,在我的parent.component.html
文件中,我调用了该子组件:
<app-child [customColumns]="customColumns">
</app-child>
But I'm getting this error:但我收到此错误:
Types of property 'type' are incompatible.属性“类型”的类型不兼容。
Type 'string' is not assignable to type '"button" |类型“字符串”不可分配给类型“按钮” | "link" | “链接” | "image" | “图像” | "icon"'. “图标”'。
But when I am doing same thing in normal typescript or ngOnInit() function it is working, can't figure out why it is happening, help me please, thanks in advance.但是当我在正常的 typescript 或 ngOnInit() function 中做同样的事情时,它正在工作,无法弄清楚为什么会发生,请帮助我,在此先感谢。
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 },
];
My project dependencies:我的项目依赖项:
"@angular/cli": "~14.2.7", "typescript": "~4.7.2"
In order to replicate the same behavior in normal TypeScript you should use this scenario:为了在正常 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;
That's simular to Angular typecheck code.这类似于 Angular 类型检查代码。
In order to solve it you can use either predefined enum:为了解决它,您可以使用预定义的枚举:
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,
or as const
:或者as const
:
type: 'link' as const
Please try this请试试这个
1.create a class like this 1.像这样创建一个class
export class CustomColumns {
constructor(
public name?: string,
public index?: number,
public type?: 'icon' | 'image' | 'link' | 'button',
public icon?: any,
public url?: string
){}
}
2.and in your child component use like this 2.在你的子组件中这样使用
@Input() customColumns: CustomColumns;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.