是否可以将ngFor的每个值作为一个值添加？
是的，可以将ngFor的每个值作为一个值添加。
ngFor是Angular框架中的一个指令，用于在模板中循环遍历一个集合，并为每个元素生成相应的HTML代码。在ngFor中，可以通过使用let关键字来定义一个局部变量，该变量代表当前循环的元素。
要将ngFor的每个值作为一个值添加，可以在循环中使用该局部变量来获取每个元素的值，并将其添加到一个数组或对象中。
例如，假设有一个名为items的数组，我们可以使用ngFor指令遍历该数组，并将每个元素的值添加到一个新的数组中：
<div *ngFor="let item of items">
{{ item }}
</div>在上述示例中，ngFor会遍历items数组，并将每个元素的值赋给item变量。然后，我们可以在模板中使用item变量来显示每个元素的值。
如果要将每个元素的值添加到一个新的数组中，可以在组件中定义一个空数组，并在ngFor循环中使用push()方法将每个元素的值添加到该数组中：
items: string[] = ['item1', 'item2', 'item3'];
newItems: string[] = [];
// 在某个方法或生命周期钩子中
for (let item of this.items) {
this.newItems.push(item);
}在上述示例中，我们定义了一个名为newItems的空数组，并在循环中使用push()方法将items数组中的每个元素的值添加到newItems数组中。
除了添加到数组中，还可以将每个元素的值添加到一个对象中。方法类似，只需定义一个空对象，并在循环中使用属性赋值的方式将每个元素的值添加到该对象中。
总结起来，可以通过使用ngFor的局部变量来获取每个元素的值，并将其添加到数组或对象中，以实现将ngFor的每个值作为一个值添加的功能。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（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
- 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我有许多通过*ngFor创建的项目：
<my-item *ngFor="let item of myArray" [p]="item" > </my-item>
我可以通过以下方式收听click事件
<my-item ... (click)="doWork(item) > </my-item>
但是我不想附加这么多事件处理程序(因为我在那个ngFor上有很多组件)。
我想知道是否可以将事件处理程序附加到window对象(只有一次)(通过@HostListener)，然后分析event的target属性并
浏览 2提问于2017-04-09得票数 2
回答已采纳
2回答
我需要在一个使用模板驱动的表单动态生成的表中使用多个表单，它的工作方式和我做的一样好，但我不确定它是否正确。 <div *ngFor="let row of rows">
<form #f="ngForm" (submit)="submit(f)">
...
</form>
</div> #f将被定义很多次，我想知道这是否会导致问题？我最终可以给出一个动态命名(如果可能的话？)，但由于它是以这种方式工作的，所以我不想让它过于复杂。
浏览 20提问于2021-03-28得票数 0
回答已采纳
在角1.x中，以下代码的工作原理是我想要单击和翻转ng-重复中的卡片
<div class="card" ng-repeat="let card of cards">
<div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped">
</div>
</div>
然而，在角2当点击，它翻转每一个“卡”在ngFor循环.如何仅将ngClass条
浏览 0提问于2016-07-25得票数 5
回答已采纳
是否将a方法称为multiple *ngIf，它位于*ngFor中，下面有代码示例。
HTML Code
<div *ngFor="let item of groups">
<div class="headerBar" *ngIf="showHeader(item)">
<h3>Hello to the Board</h3>
</div>
</div>
//Typescript Code
showHeader(item){
let show = true;
浏览 6提问于2020-07-30得票数 1
回答已采纳
注:我是软件开发的新手，这些年来一直是功能顾问(非技术人员)。
我有一个使用*ngFor显示的数组列表，如下所示：
<li *ngFor="let borrower of borrowers">
<p>{{borrower.name}},{{borrower.amount}},{{borrower.rate}},{{borrower.tenure}},{{borrower.city}}<p>
</li>
Name是字符串。Amount是可以采用25000到100000之间的任意值的数字。Rate是介于12%到20%
浏览 0提问于2017-03-07得票数 3
1回答
在我的angular2项目中，我需要表示一个矩阵。这是我目前的代码：
<tr *ngFor="let worker of workers">
<td class="{{worker.fired ? 'fired-worker':''}}">{{worker.lastName}}<br>{{worker.firstName}}</td>
<td *ngFor="let course of courses;" class="sk-table-
浏览 2提问于2016-05-09得票数 3
回答已采纳
我在Angular2中有两个嵌套的*ngFor循环。我想要维护一个计数器，每当循环中心的代码被重复时，计数器就会递增。
计数器应从0到调整数乘以刀片数。
<tr *ngFor="let adjustment of adjustments">
<td *ngFor="let blade of blades">
<span> Counter = ????????? </span>
</td>
</tr>
浏览 11提问于2017-02-13得票数 19
回答已采纳
1回答
我在从JSON对象显示动态表时遇到了问题。我有两个数组。一个数组包含表的头部，另一个数组包含JSON，objects.The的问题是，我希望按每个JSON对象的头数组值顺序显示数据(每个对象都被视为行)。我试图显示数据的代码是：
<table id="myTable">
<tr >
<th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
</t
浏览 0提问于2018-06-15得票数 0
回答已采纳
1回答
我正在循环一个API响应，并使用以下代码在页面上显示一些项(女性和男性年龄组)：
<ng-container *ngFor="let event of day.availableEvents">
{{ event.name }}
<br>
<ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
<span [class.is-active]="status" (click)="updateS
浏览 2提问于2021-01-18得票数 1
回答已采纳
2回答
我有一个动态创建的列表。单击列表中的每一项都会切换。 下面是.html代码： <ul *ngFor="let item of items">
<li (click)="toggle($event)">{{text}}</li>
</ul> 和.ts代码： toggle(event) {
this.visible = !this.visible;
} 当我点击一个项目时，列表中的所有项目都会切换。 如何将其更改为只有单击的项目才会切换？
浏览 19提问于2021-01-26得票数 0
回答已采纳
让我们假设以下多次创建的ItemComponent：
<li *ngFor="let item of items">
<app-item [data]="item"></app-item>
</li>
并包含在单击时显示一些复杂模式对话框的按钮。
当我将一些对话框的ng模板放在ItemComponent内或*ngFor外时，它是否会影响应用程序的性能(例如，启动时间或内存占用)？
我的意思是，我知道在调用对话框之前模板不会实例化，但我不确定模板本身是为每个组件创建一次，还是为每个实例创建一次？
浏览 0提问于2019-07-02得票数 4
我有一个div，我想在这个div上添加一个删除转换，我有一个按钮来删除它。在触发按钮时，如何将css类添加到该div中。
div在*ngFor循环中创建。
<div *ngFor="let attribute of attributes>
<div [ngClass]="{' roll-out-blurred-left': a }">
{{attribute.name}} // on that div wants to add the class
</div>
&
浏览 0提问于2018-12-21得票数 0
回答已采纳
问题可能很难理解，但我的问题很简单：
我想显示一个联系人列表。
我用引导程序将它们显示为卡片
我要每行展示4张卡片
HTML结构：
<div class="row" *ngFor="let contact of contacts">
<!-- Here I want to loop 4 of the contacts before rendering a new row -->
<div class="col-md-3">
<contact-card
浏览 3提问于2017-03-03得票数 0
2回答
我有下面的代码。
<div *ngFor="let item of items"></div>
这个渲染得很快。然后我做了这个：
getItems() {
return this.items;
}
<div *ngFor="let item of getItems()"></div>
这也是表演。然而，这一次：
getItems() {
return this.items.filter(item => item.premium === true);
}
<div *ngFor=
浏览 3提问于2019-11-29得票数 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
2回答
当在mat-datepicker中使用*ngFor时，会遇到这个问题。
mat-datepicker需要模板引用变量#test才能绑定到input。
在一般情况下，在*ngFor内部使用引用变量有直接的方法吗？我找不到办法。
没有*ngFor的简单工作示例
<mat-form-field>
<input matInput [matDatepicker]="test" placeholder="Enter Date" [(ngModel)]="someDate" name="someDate">
&l
浏览 0提问于2018-03-23得票数 9
回答已采纳
我使用click事件和一些普通的javascript完成了这项工作，但我相信有更好的方法来完成这项工作。
我正在使用ngFor生成一些动态行和相应的动态按钮。
它们看起来像这样：
<div *ngFor="let section of data.order?.sections" id="{{section.class}}Detail" class="{{section.name | lowercase | removeAmpersand | removeSpaces }}">Random Text Here</div>
然
浏览 1提问于2016-07-15得票数 0
回答已采纳
我有一个动态数组，我想要创建基于这个数组的选择框，也希望选择数组中定义的值。
{
"data": [
{
"player settings": [
{
"id": 4,
"labelName": "subtitle font size",
"labelValue": [
{
"id": 1,
"lb
浏览 5提问于2020-03-30得票数 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回答
我不确定这个标题是否会公正地回答我的问题，但它就在这里。
我有一个来自angular material2的md-toolbar，在那里我循环获取动态值：
<md-toolbar (click)="selectedToolbarValue(key.Name)" *ngFor="let key of arrayOfKeys; let i=index">
<span>{{key.Name}}</span>
</md-toolbar>
现在，我想通过[ngClass]为单击的特定工具栏设置背景颜色。这是我所做
浏览 6提问于2017-08-04得票数 1
回答已采纳
2回答
在组件中的表中有一个动态创建的无线电组。我使用一个ngFor来创建单选按钮。在ngFor外面有一个清晰的按钮。当单击“清除”按钮时，我想清除无线电组。下面是我现在正在做的事情，但它只起了部分作用。例如，如果我有三个单选按钮，我只能在选择第一个单选按钮时才能清除，而如果选择第二个或第三个单选按钮，则无法清除无线电组。因此，有人能告诉我，我在这里做错了什么，或提出了一个更好的方法，为我的方案。谢谢
html：
<table>
<tr *ngFor="let member of members; let i = index&#
浏览 0提问于2019-04-16得票数 1
回答已采纳
我有一个select dropdown，其中的选项是使用*ngFor动态从服务中获取的。我想用我的自定义方式重新排序选项的顺序。从角度码可以做吗？数组是这样的
console.log(this.paymentTypeData);
Array(5)
0: {value: "DAILY", code: "D", label: "Daily"}
1: {value: "SINGLE_TIER", code: "ST", label: "Single Tier"}
2: {value: "MU
浏览 2提问于2020-11-26得票数 0
1回答
我正在尝试基本上有一个阅读更多的帖子，这是创建使用角度NgFor循环。我可以很好地打印出我的数据，但我已经尝试了一系列不同的方法来让NgFor推送到一个数组或其他东西上，这样当我单击一个帖子以显示更多数据时，它不会打开页面上的所有帖子。现在，如果我点击一个帖子以显示更多内容，页面上的所有帖子都会展开以显示更多内容。 下面是我运行NgFor循环和NgIf的代码片段。关于如何推送到数组有什么建议吗？ <tr *ngFor="let policy of needs; let i = index">
<div *ngIf="!this.isInf
浏览 20提问于2020-11-28得票数 1
回答已采纳
我有一个下拉列表的对象。它是一个person对象，具有id、firstName和lastName的属性。
<select formControlName="person">
<option *ngFor='let person of persons" [ngValue]="person">{{person.firstName+' '+person.lastName}}</option>
</select>
假设我有一个对象人，我想检查这个人对象是否在下拉列表中。如果存在，我希
浏览 2提问于2017-04-14得票数 1
回答已采纳
我试图使用指令ngIf根据条件呈现DOM元素。条件在使用ngFor的for循环中确定。
为了进一步解释，在模板中我有以下内容：
<div class="flex-card" *ngFor="let thing of things; trackBy: trackByFn">
<div class="card" *ngIf="displayCta">
...
</div>
</div>
在我的组件中，我有一些相应的属性，它们被初始化为false：
displayCta = false;
浏览 5提问于2017-06-14得票数 1
回答已采纳
我使用@HostListener来管理我的事件，而不是(contextmenu)="myFunction(myFile)"
但我不知道如何在*ngFor循环中传递对象：
file.component.html：
<div *ngFor="let file of fileList" >
<div [attr.myFile]="file">{{ file.name }}</div>
</div>
file.component.ts：
@Input() fileList: MyFileList[] =
浏览 4提问于2022-04-16得票数 0
1回答
是否可以基于角为5的JSON对象创建动态表(动态列)？如果是的话，怎么做？
我得到以下json作为API的响应：
{
"ResponseStatus": true,
"ResponseData": [
{
"Parent": "Company 1",
"Data": [
{
"Field1": "Membership 1",
浏览 1提问于2019-09-23得票数 2
2回答
下面的表包含动态生成的行输入框，这些行可能包含默认值。如果数据库中没有可用的默认值，则返回空字符串''。问题是，这会导致表被折叠到这些输入上。
<tr *ngFor="let d of displayData">
<td class=".mytable"> {{d.specRow}} </td>
<td *ngFor="let l of d.limitModel ">
<input type="text" [ngModel]=
浏览 5提问于2022-10-24得票数 0
我有Angular 8 mat-autocomplete和[displayWith]="getDropdownView"
getDropdownView(option) {
console.log("getDropdownView(): option:", option);
return "abc"; // FOR TEST
// return option.value;
}
对于一个页面，这是正常的，但对于另一个页面，它显示了[Object Object]。有这样的HTML代码：
<input matInput
浏览 1提问于2019-12-09得票数 0
3回答
我有一个角度复选框的列表，需要验证是否至少有一个被选中。
复选框项是动态的(它们来自服务)，因此它不是静态列表。一次可能含有3种元素，另一次可能含有50+等。
模板如下所示：
<tr *ngFor="let recipient of recipients">
<td class="disable edit">
<div>
<span class = "textbluesmall"><input type="checkbox"
浏览 6提问于2021-09-23得票数 0
回答已采纳
1回答
在我的组件中，我有一系列选项，如：
options = [
{
name: 'option 1'
},
{
name: 'option 2'
},
{
name: 'option 3'
}
];
在我看来，我有多个选择：
<form>
<mat-form-field>
<mat-select>
<mat-option *ngFor="let o of options&
浏览 0提问于2018-07-27得票数 0
回答已采纳
我正在尝试打开一个应用程序。当我给出一个静态URL时，它可以正常工作。但是，当我在*ngFor中创建动态href标记时，我可以看到在URL之前添加了不安全关键字，并且它不起作用。
我运行的角度6。并在一个服务中获得Id。在ngFor中，我循环结果并创建一个Id链接来打开应用程序。我制造了一根管子，但它仍然不起作用。
安全管
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
浏览 0提问于2019-01-24得票数 4
回答已采纳
2回答
模板驱动窗体中的单选按钮
、、、、
每次页面加载时，总是选中最后一个单选按钮。我知道这和身份证有关，但我想不出怎么解决。
countryArray
countryA = [{name : "Finland"}, {name : "china"},{name : "USA"}]
test.html
<form #filterForm="ngForm" (ngSubmit)="addFilter(filterForm)" autocomplete="off">
<
浏览 3提问于2019-12-14得票数 1
回答已采纳
3回答
在没有嵌套ngFor的ngIf中，是否有更简单的方法来获取实际显示结果的计数？
<div *ngFor="let stuff of things">
<ng-container *ngIf="stuff.key === 'value'">
**I'd like an easier way to get the result of this *ngIf .length and use it elsewhere**
</ng-container>
</div>
我试着使用@
浏览 11提问于2022-04-25得票数 2
回答已采纳
情况如下: ngFor呈现一个组件集合(app-item)。每个组件都有一个名为"open“的布尔变量，还有一个名为”切换“的函数，用于切换变量(真或假)。
如何单击组件(app-item)的按钮并更改其余迭代同级项的状态？
app-page.component.html
<div *ngFor="let item of items">
<app-item [data]="item"></app-item>
</div>
app-item.component.html
<button (click
浏览 7提问于2021-12-18得票数 0
当点击一个汽车品牌时，我需要它显示在底部，在底部，它有人物的名字，和它最喜欢的汽车，剪裁在上面，但是当我点击一个，汽车品牌在ngfor的所有项目之间重复。
stackblitz示例：
浏览 7提问于2022-03-11得票数 -1
回答已采纳
我的页面上有一张图片列表：
<img *ngFor="let picture of pictures" [src]="picture.path">
问题是，每次删除图片时，都会重新创建前一个列表，并重新加载所有图像。如何防止它在删除项时重新加载图像？对于ngFor指令有其他选择吗？
浏览 0提问于2018-02-21得票数 5
回答已采纳
我有一个使用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
1回答
我需要帮助。我在Angular2(4)中创建应用程序，其中我有2个选择框和1个复选框的表单。我想要实现对这个盒子的依赖。例如，我有这样的数组：
dataJSON = [
{
productName: 'Product 1',
variants: [
{
variantName: 'Variant1',
variantType: [
'Type1', 'Type2', 'Type3'
]
浏览 0提问于2017-10-19得票数 0
我想知道角的*ngFor指令实际上是如何在引擎盖下工作的？我想知道当我使用指令时发生的整个过程。
：我看到了文件，尽管没有调用传递到*ngFor数组的例如join()方法的单一用法。谢谢您的支持:)下面是显示行为的柱塞：
浏览 1提问于2017-07-07得票数 14
回答已采纳
2回答
我有一些帖子，这是加载在ngOnInit和行动togglePost加载选定的帖子项目。但我需要保持打开各种加载项目的帖子。
<accordion-group (togglePost)="togglePost($event)">
<accordion *ngFor="let post of posts" [post]="post">
<ul>
<li *ngFor="let item of items">
浏览 2提问于2017-08-17得票数 0
我有这样的组件：
@Component({
selector: "expenses-component",
templateUrl: "expenses.html"
})
export default class ExpensesComponent {
private expenses: [] = [{name: "Foo", amount: 100}, {name: "Bar", amount: 200}];
private totalAmount
浏览 1提问于2017-02-22得票数 0
用rxjs的角度显示第一个可观测结果的最佳方法是什么，并在完成其他可观测数据时组合数据？
示例：
@Component({
selector: 'app-component',
template: `
<div *ngFor="let group of groups$ | async">
<div *ngFor="let thisItem of group.theseItems">
...
</div>
<div *ngFor="let th
浏览 3提问于2019-12-02得票数 3
回答已采纳
我正在使用ngfor循环一个组件，所以它有n个组件。
每个组件都有很少的属性，其中一个属性(NickName)将通过调用服务和获取响应来发送组件的onclick，并在组件内部传递。
现在，当我这样传递时，我为单击的组件获得的响应被所有ngfor组件使用。我希望它被我点击的组件所使用。
<company *ngFor="let company of customerGroup; trackBy: trackByItems" [nickNames]="nickNames | async" [company]="company" (click)=
浏览 2提问于2020-02-28得票数 0
4回答
有什么原因导致这个简单的代码不能工作吗？我正在尝试在我的select上有一个占位符，但它只是在列表中显示为其他选项之一。
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
浏览 0提问于2017-08-23得票数 4
1回答
更改ngFor中的索引值
、、、
晚上好，我想知道我是否可以通过列表中每个项目的ID来更改ngfor的索引值。由于您知道索引从0开始，我想知道是否可以将每个元素的id的值放入索引中。 我的代码如下： <fieldset *ngFor="let g of grupo; let i = index" [g.id]="i"> problem
浏览 12提问于2020-03-26得票数 0
2回答
当试图显示可编辑输入的网格时，我出现了性能问题。在大约200行和10列时，它开始变得非常慢。(使用角4.4)
<tr *ngFor="let row of rows">
<td *ngFor="let column of columns">
<ng-container [ngSwitch]="column.columnType">
<ng-template [ngSwitchCase]="0">
<input [(ngModel)]=&#
浏览 0提问于2018-04-26得票数 8
回答已采纳
在文档中，我了解到要将数据从父级传递给孩子，我们使用如下的输入装饰
export class demo {
@input()
someInput: any;
}
然后我们像这样把数据从父母传递给孩子
<div *ngFor='let data of moreData'>
<child-component [someData]='data'></child-component>
</div>
现在我的问题是，当我们在反应性表单方法中使用formGroup时，我们使用
form组=‘form’
但是为什
浏览 5提问于2017-11-13得票数 0
回答已采纳
我试图根据aType.Name在ngFor循环中的值呈现6个自定义组件中的一个。以下是我的开关语法：
<div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
<span [ngSwitch]="aType.Name&
浏览 1提问于2016-06-21得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
