Angular:如何使用*ngFor将指令绑定到元素
Angular是一种流行的前端开发框架，它使用TypeScript编写，并且具有强大的功能和丰富的生态系统。在Angular中，*ngFor是一个常用的指令，用于将指令绑定到元素上。
*ngFor指令用于循环遍历一个集合，并为集合中的每个元素创建一个模板实例。它的语法如下：
<element *ngFor="let item of collection; let i = index">
<!-- 模板内容 -->
</element>其中，collection是要遍历的集合，item是集合中的每个元素，i是元素的索引。在模板中，可以使用item和i来访问集合中的数据和索引。
*ngFor指令的应用场景非常广泛，例如在一个商品列表中展示多个商品，或者在一个用户列表中展示多个用户信息等。
在腾讯云的生态系统中，有一些相关的产品可以帮助开发者更好地使用Angular和*ngFor指令。以下是一些推荐的腾讯云产品：
- 腾讯云云服务器（CVM）：提供可靠的云服务器实例，用于部署和运行Angular应用程序。了解更多信息，请访问：腾讯云云服务器
- 腾讯云对象存储（COS）：提供安全、稳定的对象存储服务，用于存储和管理Angular应用程序中的静态资源。了解更多信息，请访问：腾讯云对象存储
- 腾讯云内容分发网络（CDN）：加速静态资源的传输，提高Angular应用程序的加载速度和用户体验。了解更多信息，请访问：腾讯云内容分发网络
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的云数据库服务，用于存储和管理Angular应用程序的数据。了解更多信息，请访问：腾讯云云数据库MySQL版
以上是关于Angular中如何使用*ngFor将指令绑定到元素的答案，以及一些相关的腾讯云产品推荐。希望对您有帮助！
相关·内容
我有一个<ng-container *ngFor='let column of columns'></ng-container>，它显示在页面上多次由于*ngFor。我只想将"sticky“属性(指令)应用于这些ng-container元素中的第一个。而不是对其他人。我该怎么做呢？
浏览 46提问于2021-11-02得票数 1
2回答
我需要一个将动态值绑定到元素的classList的指令import { Directive, ElementRef, Input } from '@angular/core';
问题
该指令绑定class="label undefined"，因为entityType是undefined。item.type是来自*ngFor
浏览 4提问于2017-01-25得票数 1
回答已采纳
5回答
在角文档中，我们知道*ngIf，*ngSwitch，*ngFor可以扩展为ng-模板标记。我的问题是：
我认为没有ngIf或ngFor的*也可以通过角度引擎转换和扩展为模板标签。
浏览 2提问于2016-10-17得票数 107
回答已采纳
是否可以将Angular的*ngFor指令的索引属性绑定到某个不是本地html一部分的属性？<ol class="carousel-indicator">
<li data-target="#myCarousel" data-slide-to="{{i}}" *ngFor="let item
浏览 2提问于2017-07-25得票数 4
如何将字符串作为属性从将使用该指令名称的任何元素传递给angular.js指令的模板属性？在标记中：...然后在angular指令中：.directive('myCustomDirective', function(){ restrict: 'AE&
浏览 1提问于2014-12-05得票数 0
1回答
我正在用Angular2开发一个应用程序，因为我在代码中使用了指令或自定义标记，所以它不能通过W3C HTML验证来验证。例如，如果我使用<my-component>元素或*ngIf指令或某些单向/双向绑定元素(如(click)或[(ngModel)] )，则它不能对任何W3C验证器有效。我想我应该用可以生效的元素来代替它们。因此，从开始，我创建了以下摘要以供替换：
属性-&g
浏览 0提问于2016-11-29得票数 3
标记非常简单： <mat-expansion-panel *ngFor="let gig of currentVenue.gigs如果我反过来使用“静态”方法(我从示例的代码中复制了这一点)，一切都会按预期工作： <mat-expansion-panel>
<mat-expansion-panel-header我使用的是Angular<
浏览 1提问于2018-10-16得票数 2
回答已采纳
以下示例中ngFor前的*是什么意思，为什么需要它？<div *ngFor="#hero of heroes" (click)="selectHero(hero)"></div>
浏览 45提问于2016-02-19得票数 35
回答已采纳
我正在寻找一种在*ngFor作用域之外的<tr>中使用当前迭代的person的方法。在链接中，他使用ng-repeat-start和ng-repeat-end在ng-repeat.中包含多个标记，如何使用*ngFor实现与Angular2相同的行为
浏览 18提问于2016-08-31得票数 7
回答已采纳
2回答
我有一个管道，它只用精确匹配过滤我的ngFor，我通过单击filter参数通过它。-- <mat-card class="mat-card">Kategorien:</mat-card> --> <div *ngFor="let skill of SKILLS | fil
浏览 29提问于2019-05-23得票数 0
回答已采纳
我尝试创建一个简单的angular2组件，并且在将指令绑定到原生DOM元素时出错。/// <reference path="../../typings/_custom.d.ts" />
import { R
浏览 4提问于2015-08-27得票数 6
回答已采纳
Angular.js如何处理诸如"ng-click“之类的事件绑定？如果我使用Chrome Dev工具检查DOM中的HTML输出，我只看到两个类被添加到具有"ng-click“指令、"ng-scope”和"ng-binding“的元素中。Angular如何绑定到DOM来拦截这些内容？它是否附加到最上面的元素，并在内存中保留一个大对象，将事件映
浏览 2提问于2013-06-05得票数 4
2回答
我是Angular的初学者，我正在用Angular 8开发一个网站，我在我的一个页面上有这样的内容： const gridTableCells = document.querySelectorAll- /Year-wise Grid Table -->现在我的问题是，我不认为这在我的component.html中只是静态的，它会产生一个数据表，而不是有一个静态的超文本标记语言代码，我想用*ngFor
浏览 0提问于2020-08-03得票数 0
如何创建自定义角指令，以便在单击邻居元素时显示和隐藏子元素？记住，div是在ngFor中重复的。因此，div实例只应在单击custom_elem时显示子元素( h2 )，而其他div实例的子元素(custom_elem)则保持隐藏状态。ngfor本身已经在循环(在开始时)。只有当我单击(使用自定义指令)时，我只
浏览 4提问于2020-04-26得票数 1
回答已采纳
1回答
如何将动态事件监听器添加到动态元素中，即在使用服务响应完成渲染之后？我需要使用像元素id这样的选择器将动态事件侦听器添加到特定的元素。用例:假设我有两个元素，都使用*ngFor over JSON从服务响应中呈现：现在，第一个元素JSON包含一些我需要用来创建动态函数的指令，并且我需要将这个新创建的函数<
浏览 1提问于2018-05-11得票数 0
我正在尝试在Angular 4中的模板驱动表单中实现一个自定义表单控件组件，因为我希望它能够很好地与父表单集成，所以我尝试将其实现为一个ControlValueAccessor。我已经按照我能找到的指南去做了，但是Angular不合作。根据文档，它应该调用我的registerOnChange()实现，但它没有调用。为什么？/* editor-clause.component.ts */
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular</e
浏览 6提问于2017-12-22得票数 14
回答已采纳
目前我在一个视图中工作，在这个视图中我必须动态创建HTML元素。如何在HTML元素就绪后立即触发函数？
提前谢谢。
浏览 4提问于2018-06-28得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
