如何使用ngFor索引对表达式<div id="here"></div>进行插值？
使用ngFor索引对表达式进行插值的方法是通过使用Angular的内置指令ngFor来遍历一个数组或对象，并使用索引变量来访问每个元素的位置。
首先，在组件的代码中定义一个数组或对象，例如：
items = ['item1', 'item2', 'item3'];然后，在HTML模板中使用ngFor指令来遍历这个数组或对象，并使用索引变量来访问每个元素的位置。在插值表达式中，可以使用索引变量来动态生成唯一的id或其他属性。
<div id="here" *ngFor="let item of items; let i = index">
{{ item }} - Index: {{ i }}
</div>在上面的例子中，ngFor指令会遍历items数组，并为每个元素创建一个div元素。通过使用索引变量i，我们可以在插值表达式中显示每个元素的值和它们的索引位置。
这样，最终生成的HTML代码将会是：
<div id="here">
item1 - Index: 0
</div>
<div id="here">
item2 - Index: 1
</div>
<div id="here">
item3 - Index: 2
</div>这种方法可以用于动态生成具有唯一属性的元素，以及根据索引位置对元素进行样式或其他操作。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
我在我的一台笔记本电脑上开发了“角7”应用程序，它工作得很好。但是，当我尝试使用另一台笔记本开发它时，它会在浏览器控制台中生成以下错误
Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("h: 15vw;">
浏览 0提问于2019-04-09得票数 0
回答已采纳
在我的应用程序中，我定义了一些带有两个变量的组件：start和end。我用ngFor运行它，如下所示：
<template ngFor #exampleData [ngForOf]="data" #idx="index">
<div>
<example-component start="exampleData.star" end="exampleData.end" *ngIf="exampleData.start" ></examp
浏览 0提问于2016-03-17得票数 1
在一个表中，有多条记录，我希望根据单选按钮的单击来启用或禁用特定的表数据。对于Ex:如果我单击Yes，则应启用该行表数据。Rest All应为禁用形式。(AngularJS) 有没有人可以帮我一下。 <table style="background: ghostwhite;" class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
浏览 13提问于2019-05-30得票数 0
2回答
我迭代了一个数组，每次都显示一个角度分量。
<div *ngFor="let category of categories; let i=index" id="category_{{i}}">
<app-category
[inputId]="'category_'[i]"
</app-category>
</div>
category组件是递归的，我需要发送此inputId并将其用作html id，如下所示
id="{{inputId}}_{{i}}&#
浏览 0提问于2020-05-13得票数 1
1回答
组件接收列表作为参数
、、、
我需要我的组件来接收要使用的对象列表。但我得到了以下错误：
compiler.es5.js:1694 Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
</a>
<ul class="dropdown-menu">
<li [ERROR ->]*ngFor="let item of {{items}}">
<
浏览 5提问于2017-11-29得票数 0
回答已采纳
我有一个角4模板如下。我正在尝试对名称‘{{ngTemplateOutlet=}}！=xyz’执行字符串比较...如下所示，但得到模板解析错误:意外字符"EOF“(您的模板中是否有未转义的"{”？使用"{{ '{‘}}")进行转义。有人能帮上忙吗？
(代码参考: )
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<div>
<h3>Al
浏览 0提问于2018-02-03得票数 1
我正试着用Chart.js把图表放到我的flask网站上。当我使用下面的CDN链接时，所有的功能都很完美；这应该意味着我的代码没有问题。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="crossorigin="anony
浏览 3提问于2021-03-11得票数 1
2回答
因此，如果一个对象已经被选中，我基本上会尝试设置一个高亮显示。如何将对象与更改类进行比较？像这样的东西
<[ngClass]="{{perkResult.perk === perk.perk}} ? 'highlight' : 'none-hightlight' ">
当前代码：
<div class="col-xs-12">
<div class="col-xs-12 benefit-selection">
<ul class="benefits-d
浏览 0提问于2018-01-02得票数 9
回答已采纳
1回答
我有一系列的下降，每个领域一个报告。每个下拉列表都有一系列选项(每个选项相同)。用户能够更改字段以报告或添加更多内容。下拉列表似乎使用正确的值进行初始化，但在选择更改时不要更新模型。
我可以通过链接到ngModelChange来更新报告模型，但这似乎是额外的。我在其他领域也取得了成功，但在包含可变数量字符串列的可变数量的选择框中却没有成功。
*.html
<div *ngFor="let field of report.summaryFields.defaultFields">
<select [(ngModel)]="field"&
浏览 2提问于2019-03-04得票数 2
回答已采纳
我正在开发一个医学网站，我想在medicament.component.HTML页面上显示警报时，药物的数量< 50。我这样做了：
<span *ngFor="let medicament of medicaments" >
<span *ngIf="{{medicament.quantity}} < 50">
<div class="callout callout-danger lead">
<h4>Alert!</
浏览 1提问于2017-04-20得票数 4
回答已采纳
1回答
如果我有一个{id ?: number , name ?: text }类型的数组pageForm，并且我想用HTML语言中的ngFor循环自动初始化id参数，我应该怎么做？ 我正在尝试类似这样的东西： <div *ngFor="let page of pageForm ; let i=index; " >
<input type="number" [(ngModel)]="page.id = i" name="id-{{i}}" >
</div>
浏览 18提问于2019-02-12得票数 0
1回答
我制作了这个显示模板，计算了一些东西。
计算函数是getPredictedRate()。
<div class="ranking-list-container panel panel-default" *ngIf="isTasteGameRanking">
<ul class="ranking-list list-group">
<li class="ranking-element list-group-item row" *ngFor="let gameRate of
浏览 1提问于2016-11-23得票数 0
回答已采纳
1回答
这是我第一次发表对礼仪如此苛刻的文章。
我一直在离子项目中使用*ngFor="let item of item“，但我遇到了一个问题，那就是一旦在a标签中使用了*ngFor，我不知道我可以将所选项目的数据传输到包含它的原始标签之外的标签中。
代码：
<ion-list>
<div class="wrapper">
<ion-item-group class="day" *ngFor="let day of Excursion_Schedule" >
<ion-item-divider
浏览 1提问于2021-05-31得票数 0
我有一个弹出窗口，其中有一个通过*ngFor循环填充的项目列表。一切都很正常。现在我想要的是，当列表第一次显示时，第一项保持选中状态。代码如下： <div class="modal-body">
<div class="checkBox-holder" *ngFor="let mr of myReasons; let i = index">
<div class="radio-btn reason-options">
<input
浏览 25提问于2020-06-14得票数 0
回答已采纳
1回答
我有一个名为vehicles的firebase集合：
每个文档都有相同的字段。我只想打印那些可用的文档。available字段为boolean类型。如果我执行某些操作，则available将更改为false。
因此，我将vehicles集合导入到我的组件中：
export class VehiclesComponent implements OnInit {
vehiclesCollection: AngularFirestoreCollection<Vehicle>
vehicles: Observable<Vehicle[]>;
constru
浏览 0提问于2018-02-12得票数 0
回答已采纳
我刚刚开始学习角4，我试着使用这个数组：
public productsByLaw: IHash;
interface IHash {
[row: number]: IProduct[];
}
productsByLaw将为我将在<table>中显示的每一行存储一个IProduct数组。
在ngFor中(在本例的第二个例子中)：
<tr *ngFor="let productionorder of productionorders; let rowIndex = index">
<td>
<select id="
浏览 3提问于2017-11-03得票数 0
回答已采纳
下面的HTML有问题，不幸的是，我不知道正确的Angular.js术语来正确标题这个问题。
<body ng-controller ="GuessingGamesController as gamesCtrl">
<h1>Guessing Game Test Page</h1>
<div id="Game">
<h2>Test Game</h2>
<form name="StartGameForm" ng-submit=&
浏览 4提问于2014-12-12得票数 2
回答已采纳
1回答
我试图打印字符串值中的数组元素，但它打印了整个数组。
var data = {'test' : 'hello '};
var name = "John";
print("$data['test']$name");
我找不到正确的方法来做这件事。在dart中有没有其他方法可以将数组元素与变量或静态字符串值连接起来？
我已经做了多种语言，如JS，JAVA或PHP，但在dart中，我无法找到一种方法。请指导我在这里遗漏了什么。
浏览 2提问于2021-01-20得票数 1
2回答
在ngFor内部循环数组，如下所示：
<div *ngFor="account of accounts">
<button (click)="function1(); account.message='How do I interpolate {{account.something}} here'"
</div>
我收到错误Got interpolation ({{}}) where expression was expected，如果我只是做account.something没有插值，因为它是在单引号之间，
浏览 1提问于2018-05-11得票数 0
回答已采纳
我正在尝试生成选项卡，如果在数据结构中设置了属性“permissions”，则可以选择具有名为“if -permission-keep”的属性，该数据结构正在迭代以创建选项卡。下面是数据结构： $scope.tabs = [
{heading: "Details",
route:"facilities-view.details"
},
{heading: "Devices",
route:"facilities-view.devices",
style:"fas
浏览 9提问于2019-10-08得票数 0
2回答
我正在将大量的excel电子表格转换成json，然后构建一个工具来格式化数据并利用它进行分析。
在上传过程中，我向用户展示他们所有数据的视图。不过，我在格式化表格时遇到了一些问题，我希望这里的人能帮助我解释这个问题：
当在html中使用标准数据表时，当硬编码时，我可以很容易地得到我想要的结果：
<div style="margin-bottom: 10px">
<table class="table table-responsive table-condensed">
<tr>
<th
浏览 0提问于2018-10-22得票数 0
回答已采纳
1回答
我使用的是Angular2和ngSemantic库。我创建了一个表单，下面是我的代码：
模板文件：
<div class="container">
<h1>My first form</h1>
<form class="ui form" [formGroup]="myForm">
<sm-loader [complete]="!submitted" class="inverted" text="Loading..."
浏览 14提问于2016-09-26得票数 0
1回答
我在一个td中有一个带有复选框的表。我必须为表中的每个复选框找到值。我该如何实现？ <tr id="trval" *ngFor="let x of csvData">
<td id="td" (click)="click($event)" contenteditable *ngFor="let y of x;let j=index" [class.active]="i == selectedRow">
<i *ngIf="j==0"
浏览 14提问于2019-05-01得票数 0
1回答
Angular -按类别显示项目
、、、、
我想显示其类别下的图书，但由于为每个类别Id调用了LoadBooksByCat(catId)，它将更新显示在新列表中的所有以前的图书 categories: Observable<any[]>;
myBooks: Observable<any[]>;
this.db.GetDatabaseState().subscribe(rdy => {
if (rdy) {
this.categories = this.db.getCategories();
}
}
LoadMyBooksByCat(catId){
this.myBoo
浏览 25提问于2020-07-25得票数 1
回答已采纳
1回答
在*ngFor中使用*ngIf中的变量时，我遇到了一个问题：
<li *ngFor="let event of enum ; let i = index">
<textarea pInputTextarea autoResize="autoResize" [(ngModel)]=x[i] placeholder="xxx" formControlName=desc{{i}}></textarea>
<div class="alert" *ngIf="!rForm.cont
浏览 0提问于2018-04-19得票数 0
回答已采纳
我正在寻找一种将类动态添加到aurelia模板的方法。如果特定的li是可见的，我必须添加一个活动类。
示例
<section id="jobsCategoryContainer" class="jobsCategoryContainer">
<h1>{{title}}</h1>
<div *ngFor = "#slide of jobCategorySlides; #i = index" id="job-category-slide_{{i}}" class="jo
浏览 0提问于2016-05-26得票数 4
2回答
我有这样的json
{
"_id": "603aaab9dead94fee94d280e",
"store_id": "6031a1bde94a31fcbd6af4e5",
"store_name": "maria",
"name": "alpokal",
"description": "test buah mangga",
"unit": "kilogram",
"p
浏览 8提问于2021-03-06得票数 1
回答已采纳
2回答
我使用*ngFor指令填充一系列div。我也在使用css的引导库。
<div data-toggle="collapse" data-target="#toggleDemo"*ngFor="let pair of pairings">
<div data-target="#toggleDemo">
</div>
</div>
我将有许多这样的条目，我想使用从引导中展开/折叠。为了使其工作，每个div必须有一个唯一的数据-目标属性值。
我想使用“结对”对象中的一个属性，
浏览 1提问于2017-04-15得票数 4
回答已采纳
1回答
尝试执行以下操作并获得"Got插值({}})，其中表达式被期望为“错误”。
<ul>
<li *ngFor="#item of items">
<a href='' (click)="foo('{{item.name}}')">{{item.name}}</a>
</li>
</ul>
谢谢!
浏览 1提问于2016-04-16得票数 9
回答已采纳
向大家致以节日的问候！
我有以下代码，它基于materialize-css框架构造一个单选按钮
<input name = 'group1'
type = 'radio'
id = 'test2'/>
<label for = 'test2'>Yellow</label>
我使用*ngFor的尝试如下所示：
statuses: string[] = [
'Single',
'Married',
'Di
浏览 0提问于2016-12-25得票数 9
回答已采纳
我在开发人员控制台中得到一个错误，如下所示：
Error: [$parse:syntax] http://errors.angularjs.org/1.6.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=43&p3=GetTimelineByUserIdAndProjectId(u.UserId%2C%7B%7BselectedProject.Id%7D%7D)&p4=%7BselectedProject.Id%7D%7D)
角
$scope.GetTimelineByUserIdAndProjectId = functio
浏览 3提问于2017-12-07得票数 0
回答已采纳
即使在二进制文件中加上括号，我也有问题。
我正在使用primeNG库。
在文件中我编写了以下代码：
<div class="products-page">
<div class="p-grid">
<div class="p-col-3" *ngIf="!isCategoryPage">
<h4>Categories</h4>
<div class="p-field-checkbox" *ngFor
浏览 2提问于2021-09-01得票数 11
我只是想得到一些关于AngularJS的概念的证明。在下面的代码中，由于某种原因，对getClass的调用将是无限循环。作用域变量noOfCalls被设置为函数中的增量。我的期望是，每次迭代都要调用这个函数一次。有人能帮忙吗？
柱塞连杆
HTML
<body ng-controller="MainCtrl">
<h1>Total number of calls: {{noOfCalls}}</h1>
<div class="container" ng-repeat="item in arraydata"&
浏览 0提问于2014-08-08得票数 1
回答已采纳
我似乎想不出我会如何做到这一点。我有一个指令，如下所示：
.directive('seqWidget', ['Sequence', function(Sequence){
return {
restrict: 'E',
scope: {
placeholder: '@',
option: '@'
},
template: '<fieldset><legen
浏览 1提问于2014-10-18得票数 2
回答已采纳
在指令中，我想知道为什么CSS没有对属性做出相应的反应。我的ng显示是一个简单的布尔条件，它取决于某个输入所需的错误是否为真。简而言之，我想要的是，当所需的验证为真时，考试必须被隐藏，直到用户在文本框中输入某些内容。
以下是代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
浏览 5提问于2016-06-04得票数 1
回答已采纳
1回答
我有一个应用程序，它从mongodb加载项目，并使用ngFor将它们放到列表中。现在，每个项都有一个按钮来加载有关此项的更多数据，，但是当我为一个项加载数据时，相同的数据将自动添加到所有其他项中。
我想，我可以做一些ngIf解决方案，但是否有更优雅的方法来做到这一点。
它位于我的数据服务文件中，用于从mongo加载数据：
getProjectData(companyID, projectID): Observable<any> {
return this.http.get(`/api/get_test_project/${companyID}/${projectID}`).
浏览 0提问于2018-02-10得票数 2
我设法应用这个*ngFor，它起作用了：
<div class="dummy__1" *ngFor="let item of dummy.pic; let i = index"></div>
如何更改class="dummy_1"以生成如下所示的代码：
<div class="dummy__1"></div>
<div class="dummy__2"></div>
<div class="dummy__3"><
浏览 1提问于2018-01-14得票数 2
回答已采纳
我在一个jsp应用程序中使用带下划线的backbone。
为了做到这一点，我使用了：
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
以便具有类似胡子的模板，从而避免jsp冲突。
到目前为止，一切都是正常的(即用简单的值正确填充了模板)。
现在，我尝试在模板中添加一个for循环，以便显示一个json数组。
所以我添加了这段代码：
<script type="text/template" id="im-template">
<div class="r
浏览 0提问于2012-06-18得票数 1
回答已采纳
这是我用ionic 2编写的html代码
<ion-item *ngFor="let job of allFreeJobs;let elementid=index">
<p>
<span id="m{{elementid}}" (click)="showMore(elementid)" color="primaryAdmin">...<ion-icon name="bicycle"></ion-icon></span>
浏览 39提问于2017-06-24得票数 25
回答已采纳
目标
我想预选一个带有ngValue的select选项和(ngModel)选项，其中的值是一个对象TypeConge：
{ "id": 2, "libelle": "Holidays" }
第一次尝试
<div class="form-group col-12">
<label class="font-weight-bold" for="typeConge"> Type congé </label>
浏览 1提问于2018-11-09得票数 1
回答已采纳
1回答
角: FormArray不迭代
、、、、
首先，很抱歉造成了一个长的职位，但我没有其他选择，因为我需要解释我面临的问题在哪里。
我有一个窗体，其中控件是一个JSON数组。我创建了一个反应性表单wrt。下面是我的JSON和TS代码：
JSON (从后端请求获得)
{
"questionList": [
{
"questionCategory": {
"questionCategoryName": "JAVA",
"id": 40,
浏览 3提问于2020-06-18得票数 1
回答已采纳
我试图将第4行的方法by (click)="runMatrix()“的文本结果添加到第7行的ion-textarea中。通常我会使用ngModel，但在这种情况下我不能，因为我使用ngModel保存数据。
.html
<div *ngFor="let fromItem of importQuestions let i = index">
<ion-card>
<ion-card-content>
<div class="question_link" (click)="openM
浏览 9提问于2019-11-27得票数 0
回答已采纳
1回答
我试图让一个ng-change函数在每次对象的$index发生变化时被调用。对象是可以在屏幕上重新排序的可拖动div的列表。
索引是对象的位置，每次它发生变化时，我都需要更新api，这不是我遇到问题的部分。
它让ng-change在$index值改变时实际调用函数。有什么建议吗？
<div class="col s7 offset-s1 tooltipped" data-position="bottom" data-delay="50" data-tooltip="Drag cards to move their position.
浏览 0提问于2016-09-26得票数 0
1回答
我试图列出我的防火墙数据库中的所有数据，其中登录的facebook用户的电子邮件地址与数据库中的电子邮件相同：
下面的代码不工作，很多格式化问题，我不知道该如何重写这个
<ng-container *ngFor="let item of fogasadatok; let i = index">
<ion-card *ngIf="{{item.useremail}}=={{navParams.data.facebookemail}}">
<img src="{{item.keplink}}&#
浏览 3提问于2017-10-12得票数 0
回答已采纳
我有一个使用NgFor构建一行元素的组件..。
<div *ngFor="let item of list">{{item.text}}</div>
我不知道这些元素有多宽，但稍后我需要能够引用一个特定的元素，获取它的left值，并将整个值移动，以便所选的元素与某个点一致。
我是通过在每个元素中添加id来做到这一点的。
<div *ngFor="let item of list" [id]="item.id">{{item.text}}</div>
然后我就用标准的getElementById().
浏览 6提问于2016-10-01得票数 6
2回答
我有一个用于按日期进行列表筛选的自定义管道，它不带参数。
<tr *ngFor="let account of accounts | customRangeFilter">
@Pipe({
name: 'customRangeFilter'
})
export class CustomRangeFilterPipe implements PipeTransform {
transform(value, arg1?:Date, arg2?:any,) {
if(!arg1 || !arg2){
return value;
浏览 0提问于2018-12-19得票数 2
回答已采纳
1回答
我正在用i18next翻译我的应用程序，但它只翻译了应用程序的一部分。
在我的应用程序中，我使用coffeescript和扩展Craftyjs，虽然有些东西作为按钮和一些文本已经翻译，而另一些则没有翻译。
没有翻译的一个例子是：
btnLearn.replace '<div id="learn-mode" class="learw">#{__("LEARN HERE")}</div>'
但这确实翻译得很好：
btnWrapper.replace """
<div class
浏览 11提问于2013-11-21得票数 0
回答已采纳
2回答
我有两个带有数据的对象，我需要用html对呈现进行重构。
我得到的是：
但这是我需要得到的：
黑匣子是*ngFor of articles对象，红色的是*ngFor of adsContainer对象。
<div *ngFor="let article of articles; let i = index;">
<mat-card class="card">
<div>
<a class="title">
{{article.title}}
&l
浏览 5提问于2021-12-24得票数 0
1回答
我有一个动态的表单，可以添加更多的元素。
<form [formGroup]="_formWorkout">
<div *ngIf="_id>0">
<!--workouts-->
<div formArrayName="workouts">
<div *ngFor="let workout of _formWorkout.controls.workouts.controls; let i=index" clas
浏览 3提问于2018-01-11得票数 1
我想从数组中显示表th和td内容。
当我使用下面的代码时，我的表工作得很好：
<thead>
<tr>
<th
*ngFor="let column of listOfColumns"
>
{{ column.name }}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data
浏览 4提问于2021-08-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
