Question

由于我是 Angular 的新手，所以我今天学习了类型和接口。所以我所做的是通过编写自定义接口而不是直接类型声明来改进我的代码：

@Input()
imageWidgets: ImageWidget;

我的界面：

export interface ImageWidget {
  [index: number]: {
    routerLink: string,
    imageSrc: string,
    title: string
  }
}

这是我通过输入变量传递给组件的：

topics: ImageWidget       = [
  {
    imageSrc  : './assets/images/solutions.jpeg',
    title     : 'Solutions',
    routerLink: '/solutions'
  }
];

现在在接收组件中，我正在执行 ngFor：

<div *ngFor="let imageWidget of imageWidgets"></div>

...但是自从我介绍了我的接口后，我收到了这个错误：

<块引用>

类型 ImageWidget 不可分配给类型 (ImageWidget & NgIterable<{routerLink: string, imageSrc: string, title: string}>) | 未定义 |空

我真的不知道为什么会发生这种情况，但是当我在这里执行此操作时，错误消失了：

@Input()
imageWidgets: ImageWidget | NgIterable<any>;

我已经搜索了很多，但我无法远程处理此错误消息。我在这里做错了什么？

Answer 1

你离我很近！您正在寻找这个：

export interface ImageWidget {
    routerLink: string,
    imageSrc: string,
    title: string
}

@Input()
imageWidgets: ImageWidget[]; // or could do Array<ImageWidget>;

https://www.typescriptlang.org/docs/handbook/basic-types.html#array

自定义 Angular 类型不可分配给 NgIterable 类型

1 个答案: