角度获取特定于ngFor每一项的数据
角度（Angular）是一种流行的前端开发框架，用于构建Web应用程序。ngFor是Angular中的一个内置指令，用于在模板中循环渲染数据列表。
当使用ngFor指令时，可以通过特定的语法来获取每一项的数据。在模板中，可以使用let关键字来定义一个局部变量，然后通过该变量来访问每一项的数据。
以下是一个示例：
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>在上面的示例中，ngFor指令用于循环渲染一个名为items的数据列表。通过let item语法，我们定义了一个名为item的局部变量，它代表每一项的数据。在li元素中，我们可以通过{{ item }}来访问每一项的数据。
ngFor的优势是可以简化循环渲染数据列表的过程，提高开发效率。它可以与其他Angular特性（如数据绑定、事件处理等）结合使用，实现更复杂的功能。
ngFor适用于各种场景，包括但不限于以下几个方面：
- 渲染动态生成的菜单或导航列表。
- 显示从后端API获取的数据列表。
- 构建可重复的表单字段。
- 创建可滚动的数据表格。
在腾讯云的产品生态系统中，与Angular和ngFor相关的产品和服务包括：
- 云函数（SCF）：腾讯云的无服务器计算服务，可用于处理Angular应用程序的后端逻辑。 产品链接：https://cloud.tencent.com/product/scf
- 云数据库MongoDB版（TencentDB for MongoDB）：腾讯云提供的托管式MongoDB数据库服务，可用于存储和管理Angular应用程序的数据。 产品链接：https://cloud.tencent.com/product/tcdb-mongodb
- 云存储（COS）：腾讯云的对象存储服务，可用于存储Angular应用程序中的静态资源（如图片、视频等）。 产品链接：https://cloud.tencent.com/product/cos
请注意，以上仅是示例，腾讯云还提供了更多与Angular开发相关的产品和服务，具体选择应根据实际需求进行评估。
相关·内容
我的问题非常业余，但我很好奇如何最好地使用ngFor。假设我有一个组件，它有这样的一些数据：
stuff = [
{'id':1,'title':'A'},
{'id':2,'title':'B'},
{'id':3,'title':'C'},
{'id':4,'title':'D'},
{'id':5,'title':'
浏览 0提问于2018-07-24得票数 1
回答已采纳
3回答
在通过@Input在组件之间传递数据(Array)时，我遇到了一些问题，有一些代码。parent.component.ts：
public ngOnInit() {
this.applications = new Array<ApplicationEntryInterface>();
(...)
let shortTermData = new ShortTermApplicationAdapter(application);
this.applications.push(shortTermData);
console.log(this.applications);
}
这个
浏览 2提问于2017-10-02得票数 0
回答已采纳
1回答
给定以下代码：
<div *ngFor='let loc of user.locations | async'>
<div *ngFor='let day of days'>
<div *ngFor='let data of get_data_observable(loc, day) | async'>
...
</div>
</div>
</div>
这是连接到Firebase数据库。
get_data
浏览 6提问于2017-07-20得票数 1
想知道是否可以从JSON数据创建动态材料表。列和标题的数量应该根据JSON中的键进行更改。例如，这个JSON应该创建这个表：
{
color: "green", code: "#JSH810"
}
,
{
color: "red", code: "#HF59LD"
}
Color Code
green #JSH810
red #HF59LD
这个JSON应该创建这个表：
{
id: "1
浏览 1提问于2020-08-28得票数 2
回答已采纳
我有一个父组件，它通过*ngFor加载二次子类组件。我的父组件加载数据以呈现子组件。在用户请求后需要额外的数据。
父组件的html：
<panel *ngFor="let item of collection" (selected)="onTogglePanel($event, item)">
<div panel-body>
<item-detail
*ngIf="item.detail; else templateLoading"
[deta
浏览 1提问于2018-07-04得票数 0
回答已采纳
我有几个material-input：
<span *ngFor="let field of listfields">
<material-input #keyp (keyup.tab)="keyupEnter(field,keyp.inputText,keyp)"
label="Edit {{getDisplayStr(field)}}"
floatingLabel="true"
浏览 1提问于2017-05-18得票数 2
我在服务器上使用PHP，它返回项目列表。现在，我喜欢使用AngularJS来修改这些项。
是否有特定角度的方法来附加每一项的内联数据？我可以通过使用html数据属性来解决这个问题，但是访问这些属性非常糟糕。
<article -->>angular item data model<--- ?>
<div>date</div>
<div>title</div>
<div>content</div>
</article>
您将如何解决这个，而不呈现项目列表使用角度？
浏览 4提问于2015-08-10得票数 1
回答已采纳
我是Angular2和Rx的新手。
我的目的是从Git hub获取用户并显示登录名。(我在网上阅读RxJ时得到了这段代码)我想用Angular 2实现它。
export class AppComponent implements OnInit{
private listEmpty : boolean;
private userList : any;
constructor(){
}
ngOnInit(){
this.listEmpty = true;
this.userList = [];
var reqStream = Rx.O
浏览 0提问于2017-05-30得票数 0
我有一个Angular循环，它从我的数据库中返回一个项目列表。在每一项中都有一个数组(这是第二个*ngFor循环所在的位置)。 第二个循环(*ngFor="let option of item.options)将有四个结果。当我单击带有问题类的<li>时，我想添加一个类来突出显示它。但是，如果我单击另一个<li> (例如，4个选项中的3个)，我想向该类添加一个类，但从第一个单击的<li>中删除它。 <ul>
<li *ngFor="let item of items | async">
<d
浏览 17提问于2019-03-08得票数 0
回答已采纳
2回答
我有一个有很多ngFor的表格，如何从getList()的项目中做局部变量呢？
我需要用户#？
例如：<div *ngFor="let #item of getList()"></div>？以及如何在next ngFor超文本标记语言中使用局部变量？
浏览 0提问于2018-08-10得票数 1
我正在使用离子4，我试图创建一个水平滚动，每一项都将是一张卡片。这些卡片将被动态显示(使用*ngFor)。 我已经尝试过这样的东西： <div class="container">
<div class="scroll" scrollX="true">
<ion-card *ngFor="let item of items">
...
</ion-card>
</div>
<
浏览 10提问于2019-05-17得票数 0
回答已采纳
我在我的Ionic 3项目中收到了两个使用api调用的数组。我希望在同一行中显示来自这两个数据的数据，如下所示
[item1.1] [item2.1]
[item1.2] [item2.2]
[item1.3] [item2.3]
而不是像这样
[item1.1] [item1.2]
[item1.3] [item2.1]
[item2.2] [item2.3]
我尝试过不同的方法，比如使用forkJoin和combineLatest，它完整地显示了第一个数组，然后是第二个
Observable.combineLatest(this.arr1, this.arr2).subscrib
浏览 20提问于2019-07-30得票数 0
我有一个这样的收藏
const CollectionItems = {
[
"samsung":{
"battery":"2200mAh",
"series":"S",
"region":"inside",
"instock":"Y",
"open-issues":4,
浏览 11提问于2020-12-25得票数 1
我想提供一个流api的一些数据的推特流api。我正在使用django。
我相信只要为数据创建一个生成器并在HttpResponse中返回它就足够了--将生成的每一项编码成一个javascript对象。
这样行得通吗？有没有更好的方法来做这件事？
浏览 2提问于2011-07-13得票数 0
回答已采纳
我想弄清楚我的节目发生了什么，但我真的不明白。在我跳到这个问题之前，为了这个问题，我简化了代码，并进行了一些测试，以确保我本地化了问题。因此，在我的component.html文件中，我有一段代码：
<div *ngFor="let item of entityDetails | keyvalue">
<div *ngIf="hasConflict(item.key)">text</div>
</div>
如您所见，我使用的是*ngFor和角度KeyVauePipe，在内部我使用*ngIf检查一个条件。Ent
浏览 4提问于2019-10-11得票数 0
1回答
我在使用JSON时遇到了麻烦，代码也有问题
<div class="col-lg-12">
<div *ngFor="let Questionnaire of struc.data; let i = index">
<span>{{i}}. {{Questionnaire.attributes.content.question}}</span>
</div>
</div>
<!--Radio button answ
浏览 0提问于2017-09-18得票数 0
我不想使用for循环来像这样将对象转换为Array！如果将进程加倍并降低应用程序的性能(我使用的是Ionic2和类型记录，使用Firebase)
用于(让键在数据中){array.push(值)；}
是否有任何使用*ngFor迭代对象本身的解决方案(如图片所示)。
或者我可以将这个对象(如图片所附)转换为Array，这样就可以在*ngFor中进行迭代。
浏览 10提问于2017-01-04得票数 24
回答已采纳
2回答
我使用的是离子段和嵌套JSON。
现在我用的是离子的角度框架。
离子的版本是5。现在我很难在html文件中显示。两个页面都显示在下面。
{{item.tablist.name}}没有给我任何数据与NO2离子卡.
data.json
[
{
"title": "TravelTime",
"tablist": [
{
"id": 1,
"name": "TT 1 Average Travel Time",
浏览 4提问于2020-07-01得票数 0
回答已采纳
例如，：，我需要输出一个列表。每个项目都有一个(单击)处理程序，其中包含一个类似于item对象的参数。
<ul>
<li *ngFor="let item of myList">
<button (click)="clickHandler(item)"></button>
</li>
</ul>
此列表将经常动态更新:我将加载新项onScroll，或通过搜索筛选列表。
对于每个项目角添加一个事件侦听器！
问题：
它可以是列表中的很多项，所以很
浏览 3提问于2017-06-09得票数 9
我已经被困在这件事上了，我弄不清楚这个问题。我想我可能只是运气不好，因为querySelectorAll不是很.角质的。
我已经将多级菜单实现到一个应用程序中: tympanus.net/codrops/2015/11/17/multi-level-menu/。
效果很好。太完美了。
除了，当我使用*ngFor创建菜单和子菜单时。
<section class="list">
<nav id="ml-menu" class="menu">
<button class=&
浏览 0提问于2017-10-06得票数 0
回答已采纳
1回答
我将MatExpansionModule添加到应用程序模块，开始进行一些测试。
创建一个单一的mat-expression-panel呈现，但是如果我想用一个ngFor动态地创建一组面板，它将锁定我的网页。
我想弄明白为什么会发生这种事，并可能会纠正它。
我正在针对各种设计进行测试，并且显式地将ngFor应用于此实现将失败。
试过以下几点：
测试测试字符串`
<mat-展开-面板*ngFor=“让项目的sampleList"> {item.name}}测试字符串‘
最后一个(3)是它失败的地方。
为了尝试提取嵌套的数据，我利用了这些内容作为一个简单的字
浏览 0提问于2019-08-20得票数 0
7回答
<li *ngFor="#user of users ">
{{ user.name }} is {{ user.age }} years old.
</li>
是否有可能颠倒ngFor，即项目是自下而上添加的？
浏览 64提问于2016-02-29得票数 77
回答已采纳
1回答
有没有人知道是否可以使用angular2-mapbox在标记周围添加圆/半径？
我知道这不可能开箱即用，但也许退出并不是什么大问题？
任何建议都非常受欢迎。
<mapbox [center]="[-5.646973, 52.087483]">
<mapbox-marker
*ngFor="let marker of map.markers"
flyTo="16"
[image]="marker.image"
[coordinates]="marker.coordinates
浏览 0提问于2017-06-07得票数 1
我目前正在学习PHP和HTML，所以请容忍我。
我有一个显示表的网页，这个表的内容来自本地主机上的数据库，该数据库不断更新(这将显示我们的库存在我们的仓库中)。该表有3列-项目编号-描述-数量可用。
我试图做的是得到输入框旁边的每一项，以便用户可以键入一个数量，他们想要订购。
我不知道该怎么做。我的理解是，对于这个项目编号字段中的每一项，我的理解是“创建一个输入框”，但是我发现我不能同时运行对项目列表的查询并创建一个表单\ input框(如果这是有意义的话)。所以我回到了第一步，我只有一个项目编号的列表，而不知道下一步该去哪里。
(注意:在过去，人们对用户如何支付订单感到困惑-在这方面没有实现
浏览 2提问于2014-02-28得票数 1
回答已采纳
在我的TypeScript类中，我可以加载一个类型为HTMLCanvasElement的数组--但是当我使用ngFor迭代这个数组时，我只看到页面上每个加载的画布对象的文本：“”。
我的模板代码的要点是：
<div>*ngFor="#cvs of canvases">
{{cvs}} </div>
相关类别代码：
canvases:HTMLCanvasElement[]=[]
var canvas = document.createElement("canvas");
//here I take an image and dra
浏览 5提问于2016-07-08得票数 0
回答已采纳
我有一个对象数组，我称之为来宾：
[
{id: 1, first_name: "Tom", last_name: "", logo: 2},
{id: 2, first_name: "John", last_name: "", logo: 3},
{id: 3, first_name: "Jim", last_name: "", logo: 4}
]
我在ngFor中显示这些对象，它工作得很好：
<app-guest-item *ngFor="let guest of
浏览 2提问于2021-01-14得票数 1
回答已采纳
2回答
有人能解释一下为什么这段代码中使用角4模板的工具提示不起作用吗？
<template ngFor let-channel [ngForOf]="channels">
<td>
<em *ngFor="let color of findBallsColor()" class="fa fa-circle {{ color }}" [tooltip]="id"></em>
</td>
</template>
<ng-template #id&g
浏览 5提问于2017-10-11得票数 1
回答已采纳
我试图在我的app.component.ts文件中创建以下HTML元素：
<a *ngFor="let ver of versionList">{{ver}}</a>
我遇到的问题是将*ngFor添加到元素中。我试过用：
const a = this.renderer.createElement('a');
this.renderer.setProperty(a, '*ngFor', 'let ver of versionList');
和
const a = this.renderer.createEl
浏览 1提问于2019-10-01得票数 1
回答已采纳
2回答
我有一个json对象如下：
Json
{error: false, message: [,…]}
内部消息：
{convid: "5aeab8a0e5dd7c55942a7ce7", recipient: "Akhil Sindhwani", seen: false, from: "Miti Desai",…}
convid："5aeab8a0e5dd7c55942a7ce7“来自："Miti Desai”消息：“asd桑”收件人："Akhil Sindhwani“见:假主题："sasas”updatedAt：&
浏览 0提问于2018-05-03得票数 0
我正在尝试使用Firebase的实时数据库，我已经为这样的图书列表和它们的价格创建了一个API。
{
"Books":[
{"Angular 4": "$9.99"},
{"HTML 5": "$10.99"},
{"CSS3": "$21.90"}
]
}
在从npm中的AngularFirebase包导入所有必需的angularfire2依赖项之后，我编写了以下代码从数据库中检索值：
booklists: Angul
浏览 2提问于2017-10-10得票数 1
我有一个父组件，可以从服务Settings获得过滤器。
export class OrdersExecutionSidebarComponent {
public get filters(): _Filter[] {
return this.settings.filtersRepository.filters;
}
}
模板是：
<app-filter [filter]="flt" *ngFor="let flt of filters"></app-filter>
子组件app-filter
@Com
浏览 0提问于2020-10-25得票数 0
回答已采纳
2回答
如何使用*ngFor显示角内阵列的数据？
app.component.ts
list = {
"one": [
{
"name": "a",
"active": false
},
{
"name": "b",
"active": false
}
],
"two": [
{
"name": &
浏览 0提问于2018-08-28得票数 1
回答已采纳
2回答
我很好奇，在*ngFor循环中保存变量的正确方法是什么，因为出于效率的原因，我不想多次调用一个函数
下面是我想要做的例子：
<div *ngFor="let item of items; let i = index; let value = getValue(item)" [ngClass]="{'alert':!value}">
<div *ngIf="!value">
alert
</div>
{{item}}
</div>
下面是我尽量避免的例子：
<
浏览 0提问于2017-08-03得票数 1
2回答
我有一个*ngFor，我试图在单击时更新{{subtotal}}标签，但它会更新所有具有相同值的项。{{quantity}}也是如此。有一种创建局部变量的方法吗？下面是我的代码 html <CardView class="cardStyle" *ngFor="let card of shoppingCart; let i = index;">
<Label text="{{card?.product.productName}}" textWrap="false" class="product-t
浏览 17提问于2019-09-09得票数 0
回答已采纳
所以我就用伯特预训练的焦距损失对物理、化学、生物和数学进行分类，得到了一个很好的f-1宏0.91。这是好的，因为它只需要寻找令牌，如triangle，reaction，mitochondria和newton等，以更广泛的方式。现在我也想对章节的名称进行分类。这是一个有点困难的任务，因为当我训练它在伯特208班时，我的分数几乎为0。为什么？我知道有很多信息，比如nacl: sodium chloride，bohr model，9.8 m/sec等等，我认为伯特没有受过训练。我只想问几个问题。
伯特在这些条件下有用吗？它是经过科学训练的吗。我的意思是，它能把Schrödinger equation
浏览 0提问于2020-11-17得票数 1
我有一个简单的团队列表，首先我将每个团队放在一个firebase文档中，当查询集合时，用*ngFor显示它们很简单。非常简单的例子：
<ion-card *ngFor="let t of (team|async)" >
<ion-card-header>
<ion-card-title>name: {{t.name}} </ion-card-title>
{{t.pic}}
score = {{t.score}}
</ion-card-header>
</ion-card&
浏览 3提问于2019-11-22得票数 3
回答已采纳
2回答
我想在循环中呈现一些数据：
<div *ngFor="let data of parameters.items.tableConfig.nodes">
<table-item [data]=data></table-item>
</div>
但数据
我有个错误：
异常：./TableWidgetComponent类TableWidgetComponent -内联模板中的错误:由:无法读取未定义的属性“节点”引起的7:17
怎样才能等待数据的到来，然后再呈现视图呢？
*ngIf="parameters
浏览 3提问于2017-03-06得票数 0
回答已采纳
3回答
我试图迭代模板中的组件列表。组件本身就有模板。如何将组件的模板添加到“父”模板中？
我尝试了很多来自角飞镖教程的答案，以及关于角-js和角的各种其他问题，但是没有一个有效。
我的第一个想法是做以下工作：
ElementList组件
@Component(
selector: 'element-list',
template: '''
<ul>
<li *ngFor="let element of list">
{{ element }}
</li>
</
浏览 0提问于2019-08-23得票数 0
1回答
我使用mat-select material和Angular5。我陷入了无法将值绑定到mat-select中的*ngfor的问题中。
这些值是从rest API响应中获取的，我将其赋值给mat select中分配给ngfor的值。当我对其进行控制台操作时，我可以看到这些值，但是在html中，我无法获得该值。
html
<mat-select name="name" [(ngModel)]="nameselected">
<mat-optgroup *ngFor="let name of names" [label]="n
浏览 15提问于2018-06-01得票数 -2
我使用的是Angular 8，在这里我需要在NgFor循环中做一个弹出窗口，数据是在弹出模式下绑定的，但相同的数据在引导模式下是连续绑定的… 我的Html是 <tr *ngFor="let law of List; index as i">
<td>{{i+1}}</td>
<td>
<mat-form-field>
<input matInput placeholder="Name" [formControl]="c
浏览 24提问于2021-02-01得票数 2
我试图用ngFor显示一个标签列表。带是一种简单的数据结构。其中的每一项都有一个主题。
我得到了一个错误: JS: error: Error in ./SilabusComponent类SilabusComponent -内联模板:2:64是由:无法读取未定义的属性“subject”引起的。
好像它不知道物品。知道吗？
以下是组件解码器：
@Component({
selector: "kbm-silabus",
template: `
<StackLayout>
<Label ngFor="let item o
浏览 2提问于2016-10-10得票数 4
我通过以下方法生成6x6网格：
<ion-grid>
<ion-row *ngFor="let rowIndex of createRange(6)" [attr.id]="'row-'+rowIndex">
<ion-col col-2 *ngFor="let colIndex of createRange(6)" [attr.id]="'row-'+rowIndex+'-col-'+colIndex">
浏览 2提问于2017-05-13得票数 1
回答已采纳
我有一组是对象的项目。这些项目是从服务中调用的，并在购物车页面上显示。
单击“删除”按钮时，将运行delete this.cart.items[i];。this.cart是我的服务，并从对象中删除该项。它在页面上也成功地做到了这一点，但是我在控制台中得到了一个空白元素和错误，名为Cannot read property 'qty' of undefined。我假设ngfor会自动更新DOM并删除元素，因为该对象不再存在。我还需要手动删除DOM中的元素吗？
从下面的数组中，我希望完全删除第一项，但仍然显示第二项。
[
{
"desc": "De
浏览 4提问于2020-08-23得票数 0
回答已采纳
如何使用*ngfor和表格显示以下数据？我试过了，但是弄糊涂了。 <tr *ngFor='let properties.property_detail of properties, let i=index'>
<td>{{properties.property_detail.name}}</td> 对于可观察的和 return this.httpClient.post('http://localhost:8000/properties',
{ "name":
浏览 6提问于2019-02-07得票数 1
我把数据还给了我，这些数据运行得很好
工作数据是
data: Array(16)
无法工作的数据如下所示
data: Menu1Items: Array(5) > 0 { .... } etc
我使用的是角5，所以服务返回这样的数据
.map((response: Response) => {
return response;
然后组件截取它，console.log就可以正常工作了。
this.arsSevice.getMenu()
.subscribe(
result => {
浏览 4提问于2017-12-05得票数 1
回答已采纳
我有个问题，我不知道用角度来做这件事的可能性。
我在HTML中有一个简单的代码：
<div >
<div *ngFor="let item of apiNames, let i = index" class="rescontainer">
<div class="resbox headline">
<strong>Name:</strong> {{item}}
<span class="extra
浏览 0提问于2018-09-24得票数 0
回答已采纳
1回答
我想导入一个包含n行和25列的.txt文件。由于有10 000 000行，我想按行方式导入它们，只保留25列中的前7行，然后将带有7列的新行写入新列表中。这是我迄今为止尝试过的，但没有奏效：
results = []
with open('allCountries.txt', newline='') as inputfile:
for row in csv.reader(inputfile):
results.append(row[:,[0,1,2,3,4,5,6,7]])
print(results)
错误：
TypeError: li
浏览 5提问于2022-05-05得票数 0
回答已采纳
我在试着建立一个投票系统。我有很多选择和投票
集合，显示“poll1”中可用的选项。
_id:'1',
pollId:'poll1',
choice:'red'
_id:'2',
pollId:'poll1',
choice:'blue'
_id:'3',
pollId:'poll1'
choice:'green'
选票收集
_id:'a'
choiceId:'3' // corresponds to the _i
浏览 4提问于2022-01-20得票数 0
回答已采纳
1回答
我试图在google地图上显示我的应用程序中的多个位置，但我只能显示一个位置，如何显示多个位置？
page.html
<agm-map [latitude]="lat"[longitude]="lng" [zoom]="15"
[zoomControl]="false">
<agm-marker *ngFor="let location of tracks" [latitude]="tracks.lat" [longitude]="tr
浏览 4提问于2017-07-18得票数 1
回答已采纳
在我的AppComponent模板中，我有3个子组件-- HeaderComponent、MenuComponent、ContentComponent。子组件- MenuComponent的数据是通过HTTP请求动态加载的。如果我通过ngOnInit中的服务或组件的构造函数进行HTTP调用，数据不会加载，视图也没有数据要呈现。我希望在进行HTTP调用后等待菜单的数据作为响应返回，然后用数据呈现MenuComponent。 我刚接触Angular，如果有人能提出一个解决方案，那就太好了。 app.component.html <div class="wrapper">
浏览 11提问于2020-04-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
