我在试着找出如何在ngFor loop中创建一个变量.

我有一个这样的循环:

<td *ngFor="#prod of products">
  <a href="{{getBuild(branch,prod)?.url}}">
    {{getBuild(branch,prod)?.status}}
   </a>
</td>

您可以看到getBuild呼叫必须重复多次.(在我的实际示例中有很多次).我想要一种方法,一旦进入循环,就可以在模板中创建此变量,并简单地重用它.

有什么办法可以做到这一点吗?

推荐答案

我认为局部变量(用#个字符定义)不适用于您的用例.

事实上,当您在HTML元素上定义局部变量时,它对应于组件(如果有的话).当元素上没有组件时,变量指的是元素本身.

通过为局部变量指定值,可以 Select 与当前元素关联的特定指令.例如:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

将在name变量中设置与Current关联的ngForm指令的实例.

因此,局部变量并不以您想要的为目标,即设置为循环的当前元素创建的值.

如果你想做这样的事情:

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

您将出现以下错误:

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  <div *ngFor="#elt of eltList" >
    <span [ERROR ->]#localVariable="elt.title"></span>
    {{localVariable}}
  </div>
"): AppComponent@2:10

Angular2实际上在寻找与提供的名称elt.title匹配的指令)...请参阅此plunkr以重现错误:https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

有关更多详细信息,请参阅此链接:http://victorsavkin.com/post/119943127151/angular-2-template-syntax"局部变量"部分.

除了迭代的当前元素外,ngFor只提供一组导出的值,这些值可以别名为局部变量:indexlastevenodd.

见链接:https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

您可以创建一个子组件来显示循环中的元素.它将接受当前元素作为参数,并创建"局部变量"作为组件的属性.然后,您将能够在组件的模板中使用该属性,以便在循环中每个元素创建一次该属性.以下是一个示例:

@Component({
  selector: 'elt',
  template: `
    <div>{{attr}}</div>
  `
})
export class ElementComponent {
  @Input() element;

  constructor() {
    // Your old "localVariable"
    this.attr = createAttribute(element.title);
  }

  createAttribute(_title:string) {
    // Do some processing
    return somethingFromTitle;
  }
}

以及如何使用它:

<div *ngFor="#elt of eltList" >
  <elt [element]="elt></elt>
</div>

Angular相关问答推荐

元件不工作时的Angular 17属性 Select 器

Angular 16:CSRF配置:我仍然可以使用HttpXsrfInterceptor和HttpXsrfCookieExtractor类吗?Inteli-J说他们不存在

Angular 17多内容投影错误

从Angular 前端访问ASP.NET Core 8 Web API时出现CORS错误

Angel Project Build从Angel 8升级后,从12MB增加到90MB

如果Rxjs间隔请求仍在进行,则不应重置,但如果用户更改输入,则应重置

如何在 Angular 中顺序执行回调

Angular AuthGuard:不推荐使用 CanActivate 和 CanActivateChild.如何更换它们?

有条件地取消所有内部可观察对象或切换到仅发出一个值的新对象

单选按钮的Angular2 Reactive Forms formControl

在 Ionic 2 中使用图像资源的正确方法

类型错误:无法读取未定义的属性

Angular 4 - 在下拉列表中 Select 默认值 [Reactive Forms]

在 Angular 2 中订阅路由参数和查询参数

错误:formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup 指令

Angular2 中的providers提供者是什么意思?

Angular2延迟加载模块错误'找不到模块'

使用 EventEmitter 传递参数

找不到 NgModule.使用 skip-import 选项跳过 NgModule 中的导入

Angular2 - 将文本框集中在组件加载上