angular - ngFor 和 *ngFor 有什么区别

标签 angular typescript

我无法在任何地方找到对差异的准确描述。与 *ngIfngIf

相同

*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 的最终版本 <ng-container>添加了元素,允许在行为类似于 <template> 的元素上使用速记语法元素(未添加到 DOM)。

另见

关于angular - ngFor 和 *ngFor 有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40159928/

相关文章:

深层嵌套数组的 TypeScript 接口(interface)

typescript - 调试 TypeScript AWS CDK 应用程序

Angular - 错误引用错误 : config is not defined

angular - 从 div 获取文本并传递给函数

angular - 我应该在表单控件上使用 `registerOnChange` 还是 `valueChanges`

Angular2 Material 设计动态标签

Angular 7 - 自定义库 - 无法导出简单类

Angular CLI : "Unexpected token import" while test execution using karma

javascript - 在 Angular 8 中监听 DOM 事件的最佳实践是什么?

javascript - 对对象键/值使用多个映射类型。只需要联合的一个值?