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

Posted 2023-03-13

【中文标题】如何在 Angular 中为 ngfor 为 html 模板键入变量？

【英文标题】：How to type a variable for ngfor for html template in Angular?

【发布时间】：2021-08-14 09:04:48

【问题描述】：

我的组件中有这个变量：

  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 模板中输入这个变量？

【参考方案1】：

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

来自此答案的代码：Is there a way to declare a specific type in 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