angular – ngFor和* ngFor之间有什么区别

发布时间：2020-12-17 17:39:55 所属栏目：安全来源：网络整理

导读：我无法在任何地方找到差异的良好描述.与* ngIf和ngIf相同 * ngFor的一个例子 li *ngFor="let video of page" ... img src="api/Videos/{{video.id}}/thumbnail"/li 以及ngFor的一个例子 template ngFor let-labelid [ngForOf]="labelLookup | keyValueFilter

我无法在任何地方找到差异的良好描述.与* ngIf和ngIf相同

* ngFor的一个例子

<li *ngFor="let video of page" ...>
  <img src="api/Videos/{{video.id}}/thumbnail">
</li>

以及ngFor的一个例子

<template ngFor let-labelid [ngForOf]="labelLookup | keyValueFilter" >
  <label  [ngStyle]="{'background-color': labelLookup[labelid].color}">
    <input (click)="changeLabel(labelid)" type="radio" name="labelSelector" value="{{ labelid }}" [checked]="labelid == 1">
  </label>
</template>

解决方法

区别在于* ngFor在内部转换为< template ngFor [ngForOf] =“...”. 它们是等价的,但前者写起来更方便. 显式版本(< template ngFor ...>)允许一次将指令应用于多个元素,而隐式版本(简写)仅使用< template>包装应用它的元素.标签.

使用Angular 2.0.0 final< ng-container>添加了元素,允许在行为类似< template>的元素上使用简写语法. element(未添加到DOM).

也可以看看

> *ngIf and *ngFor on same element causing error
> Create two elements for a single `ngFor` iteration?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!