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

Question

我的组件中有这个变量：

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

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

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

然后在brand上按f12，IDE显示GoodModel类的brand字段。

但当我在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将渲染的模板创建一个新组件，然后您可以将其键入。

这个answear的代码：有没有一种方法可以在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
}