如何在 Angular 中为 html 模板键入 ngfor 的变量？

Question

我的组件中有这个变量：

  sizes: {[key: string]: GoodModel[]};

在 controller 我的 IDE 中处理得很好。 例如，可以键入：

  this.sizes['5'][0].brand;

然后在品牌上按 f12，例如 IDE 显示 GoodModel class 的品牌字段。

但是当我在 HTML 中执行 *ngFor 时它不起作用：

  <div *ngFor="let size of sizes[radius]">
    <a [routerLink]="size.brand.url></a>
  </div>

IDE 对 size.brand 和 size.brand.url 字段一无所知。

我认为，也许存在某种处理它的方法。 有人这样想：

  <div *ngFor="let size of sizes[radius] as GoodModel">

有没有办法在 HTML 模板中输入这个变量？

Answer 1

您可以为*ngFor将呈现的模板创建一个新组件，然后您可以将其键入。

此答案中的代码：有没有办法在 ngFor 中声明特定类型

容器模板：

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

自定义组件模板：

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

.ts文件：

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