有没有办法在 ngFor 中声明特定类型 [英] Is there a way to declare a specific type in ngFor

问题描述

我正在使用 ngFor 在 Angular 4.x 中迭代特定类型 [Menu] 的集合

然后在菜单对象 [menu.items] 的集合属性上循环

不幸的是，即使 Menu 类将 items 属性定义为 MenuItem 数组，该属性在我的 IDE [Eclipse + Angular IDE] 中也是未知的.

有什么想法吗?

相关类声明 -

导出类 MenuBase {id:字符串；标题:字符串；isPublic:布尔值；角色:字符串[]；项目:菜单项[]；位置:编号；//其余类省略}导出类 MenuItem 扩展 MenuBase {菜单项类型:菜单项类型；回调:() =>空白;位置:字符串；构造函数(选项:任何){超级(选项)；this.location = options.location;this.menuItemType = options.menuItemType ||MenuItemType.location;this.callback = options.callback;}}导出类 Menu 扩展 MenuBase {构造函数(选项:任何){超级(选项)；}}

附加信息 -这是我正在做的项目:https://github.com/savantly-net/ngx-menu
该项目将在 Eclipse 中显示错误，即使它是有效的.

我从未创建过任何文档，但我在这里使用了它-
https://github.com/savantly-net/sprout-platform/tree/master/web/sprout-web-ui

解决方案

我成功的是为模板创建了一个新组件，*ngFor 将呈现并输入该组件.

容器模板:

<ng-container *ngFor="item of items" ><my-custom-component [item]="item"></my-custom-component></ng-容器>

自定义组件模板:

<!-- -->

ts 文件:

@Component({})导出类 MyCustomComponent {@Input() 项目:菜单项}

I am using ngFor to iterate a collection of a specific type [Menu] in Angular 4.x

Then looping on a collection property of the menu object [menu.items]

Unfortunately the property is unknown in my IDE [Eclipse + Angular IDE] even though the Menu class defines the items property as an array of MenuItem.

Any thoughts?

Relevant class declarations -

export class MenuBase {
  id: string;
  title: string;
  isPublic: boolean;
  roles: string[];
  items: MenuItem[];
  position: number;
// rest of class omitted
}

export class MenuItem extends MenuBase {
  menuItemType: MenuItemType;
  callback: () => void;
  location: string;

  constructor (options: any) {
    super(options);
    this.location = options.location;
    this.menuItemType = options.menuItemType || MenuItemType.location;
    this.callback = options.callback;
  }
}

export class Menu extends MenuBase {
  constructor (options: any) {
    super(options);
  }
}

Additional info - This is the project I was working on: https://github.com/savantly-net/ngx-menu
The project will show an error in Eclipse, even though it's valid.

I never created any documentation, but I used it here -
https://github.com/savantly-net/sprout-platform/tree/master/web/sprout-web-ui

解决方案

What I've had success with is creating a new component for the template that the *ngFor will render and have that typed.

Container template:

<ng-container *ngFor="item of items" >
  <my-custom-component [item]="item"></my-custom-component>
</ng-container>

Custom Component template:

<div *ngIf="item.menuItemType == 'dropdown'">
  <!-- -->
</div>

ts file:

@Component({})
export class MyCustomComponent {
  @Input() item: MenuItem
}

这篇关于有没有办法在 ngFor 中声明特定类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！