如何在ngFor循环中创建变量? [英] How to create variable in ngFor loop?

问题描述

我试图找出如何在ngFor loop中创建变量.

I am trying to find out how to create a variable in an ngFor loop.

我有这样一个循环:

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

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

You can see the the getBuild call has to be repeated multiple times. (Many more times in my actual example). I would like a way to create this variable in the template once inside the loop and simply reuse it.

有没有办法做到这一点?

Is there a way to do this?

推荐答案

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

I think local variables (defined with the # character) don't apply for your use case.

实际上，当您在HTML元素上定义局部变量时，它对应于组件(如果有).如果元素上没有任何组件，则变量引用元素本身.

In fact, when you define a local variable on an HTML element it corresponds to the component if any. When there is no component on the element, the variable refers to the element itself.

为局部变量指定值允许您选择与当前元素关联的特定指令.例如:

Specifying a value for a local variable allows you to select a specific directive associated with the current element. For example:

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

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

will set the instance of the ngForm directive associated with the current in the name variable.

因此，局部变量不会针对您想要的内容，即设置为循环的当前元素创建的值.

So local variables don't target what you want, i.e. setting a value created for the current element of a loop.

如果您尝试执行以下操作:

If you try to do something like that:

<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

Angular2 actually looks for a directive matching the provided name elt.title here)... See this plunkr to reproduce the error: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

查看此链接: http://victorsavkin.com/post/119943127151/angular-2-template-syntax ，有关详细信息，请参见局部变量"部分.

See this link: http://victorsavkin.com/post/119943127151/angular-2-template-syntax, section "Local variables" for more details.

除了迭代的当前元素外，ngFor仅提供一组导出的值，这些值可以作为局部变量的别名:index，last，even和odd.

In addition to the current element of the iteration, ngFor only provides a set of exported values that can be aliased to local variables: index, last, even and odd.

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

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

What you could do is to create a sub component to display elements in the loop. It will accept the current element as parameter and create your "local variable" as attribute of the component. You will be able then to use this attribute in the template of the component so it will be created once per element in the loop. Here is a sample:

@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>

这篇关于如何在ngFor循环中创建变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！