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

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>

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

Type ImageWidget is not assignable to type (ImageWidget & NgIterable<{routerLink: string, imageSrc: string, title: string}>) | undefined | null

我真的不知道为什么会这样，但是当我在这里这样做时，错误消失了：

@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

Custom Angular type is not assignable to type NgIterable

types

interface

typescript

angular