ngFor循环中的换行
ngFor是Angular框架中的一个指令，用于在模板中循环渲染数据。它可以遍历一个集合，并为集合中的每个元素生成相应的HTML代码。在ngFor循环中的换行是指如何在模板中正确地显示循环生成的HTML元素。
在ngFor循环中，可以使用HTML的换行符（ ）来实现换行效果。例如，可以在循环生成的HTML元素之间添加一个 标签，使它们在渲染时分行显示。示例代码如下：
<div *ngFor="let item of items">
{{ item }}
<br>
</div>上述代码中，ngFor指令遍历了一个名为items的集合，并为集合中的每个元素生成一个包含元素值的div标签。在每个div标签后面添加了一个 标签，实现了换行效果。
ngFor循环中的换行也可以通过CSS样式来实现。可以为循环生成的HTML元素定义一个样式类，并使用CSS的display属性来控制元素的显示方式。示例代码如下：
<div *ngFor="let item of items" class="item">
{{ item }}
</div>.item {
display: block;
}上述代码中，循环生成的HTML元素使用了名为item的样式类，并将其display属性设置为block，使每个元素在渲染时独占一行，从而实现了换行效果。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我正在使用ngFor来显示注释列表，当有几个字母的空格时，它工作得很好，但是如果有人添加了一个没有空格的长字符串，卡片的文本就会超出它的边界，并创建一个水平滚动条，直到卡片文本结束。当文本内容到达卡片边框时，如何使文本内容自动断开？
我的*ngFor Card代码如下所示
<div class="col-md-3 eachCard" *ngFor="let note of allNotes">
<md-card>
<md-card-content>{{ note.noteText }}</m
浏览 11提问于2017-08-14得票数 0
回答已采纳
2回答
我在HTML表中显示值，比如
<tbody>
<tr *ngFor="let employee of employeeList; let i = index">
<td> {{i}} {{ employee.name }}</td>
<td>{{ employee.address }}</td>
</tr>
</tbody>
我需要的是，在employee.name单元格中，第一个员工应该有0个空间，第二个员工有一个空间，第三个员工有两个空
浏览 8提问于2018-03-02得票数 2
回答已采纳
1回答
我想在*ngFor循环中添加一个表单。下面是我重复一个按钮的尝试，如下所示：
html文件：
<div *ngFor="let passenger of passengerForm;let i=index;">
<form>
<mat-form-field>
<input matInput type="text" placeholder="Enter Name"
[(ngModel)]="passenger.Name">
<
浏览 2提问于2019-03-15得票数 1
我对angular是个新手。我使用管道来格式化日期。我使用了following，但是，不起作用。
<tr *ngFor="let item of items; index as i" [attr.data-rel]="'sometext-' + item.startTime | dateFormat ">
如果我删除'timeslot-' +或| dateFormat，它可以工作，但是使用字符串连接它不能工作。
下面的作品。
<tr *ngFor="let item of items; index as
浏览 3提问于2019-03-28得票数 0
回答已采纳
1回答
我有一个使用嵌套json的嵌套ngFor循环，例如 <mat-tab *ngFor="let car of cars">
<car-component *ngFor="let model of car.models" [name]="model.name" [color]="model.color">
</car-component>
</mat-tab> 数据可能在哪里 {
name: 'vw',
models: [
浏览 27提问于2020-09-27得票数 0
回答已采纳
我有一个包含1个字符长字段的表，该字段由*ngFor从二维数组生成，定义为：
<table>
<tr *ngFor="let row of table; index as i">
<td *ngFor="let field of row; index as j">
<input type="text" [(ngModel)]="table[i][j]" type="text" maxlength="1" co
浏览 1提问于2020-02-28得票数 0
回答已采纳
1回答
相对来说，我是Angular2的新手，目前正在ngFor循环中导入组件。
当您在ngFor循环中导入具有数据的组件时，它似乎会检查.ts文件中的值，而不是ngFor中使用的局部变量。我想要做的是将ngFor中使用的变量发送到下一个组件。
accommodations.component (父视图)
ts：
import { Component, Input } from '@angular/core';
import { AccommodationModel } from '../../../../models/reservations/accommodation-mo
浏览 0提问于2017-09-07得票数 0
回答已采纳
2回答
我正在使用angular2和*ngFor构建一个动态表，如下所示，但是我看不到数据。我不确定{{xcol}}是不是正确，你知道吗？
<tr *ngFor="let x of exportList">
<td *ngFor="let col of cols">
{{x[col]}}
</td>
</tr>
浏览 0提问于2017-03-20得票数 0
1回答
这是我改变屏幕宽度时的当前设计： ? html： <footer class='footer'>
<div *ngFor='let item of items'>
<h3 class='footer-item'>{{item.Description}}</h3>
</div>
</footer> css： .footer {
width: 100%;
height: fit-content;
display: fl
浏览 17提问于2020-09-16得票数 0
回答已采纳
1回答
Hi all，我有带有索引的嵌套ngFor (参见下面的代码).
<div *ngFor="let category of categoriesWithFoodies; let catIndex = index">
<span>{{catIndex}}</span>
<ul class="foodies-list">
<li *ngFor="let foodie of category.foodies; let foodIndex = index">
<sp
浏览 3提问于2017-08-21得票数 0
以下是工作原理：
*ngFor="let child of items || []; let i = index;"
这不是：
*ngFor="let child of items || []; let specialVersionOfI = someFunction(index);"
我得到了：
Parser Error: Unexpected token (, expected identifier, keyword, or string at column 56 in [ngFor let child of items |
这背后的理由是什么，还有其他选择
浏览 9提问于2016-09-06得票数 3
我理解这是一个被广泛讨论的话题，然而，尽管我对相关问题进行了广泛的阅读，但我似乎无法找到解决办法。
在我的例子中，，我只是尝试循环遍历一个嵌套的对象数组，并在我的角度应用程序中显示它们。我的要求几乎与本例相同：
我遇到的问题是，当我尝试执行嵌套的*ngFor循环时，它会得到以下错误：
不能绑定到'ngForFor‘，因为它不是'li’的已知属性。("<h4>Staff</h4><ul><li [ERROR ->]*ngFor="let staff for futureBooking.users">{
浏览 0提问于2018-08-14得票数 0
回答已采纳
我使用离子角和创建复选框从动态数据行和列，只有一个复选框是从所有的选择。
我只想从每一行中选择一个复选框，并对所有NgModel的所有值进行总计
我的代码片段..。
<ion-row *ngFor="let eachVariation of productDetails.productVariations; let i = index">
<div *ngFor="let eachVariationOption of productDetails.productVariations[i].variationOptions">
浏览 4提问于2022-06-16得票数 0
回答已采纳
1回答
我有一个按钮标签，点击什么，它应该改变div标签的类，我使用的是ngFor，所以每一行都应该单独处理。
下面是我的代码片段和我想要做的事情。
<div *ngFor="let item of users">
<button class="fas fa-angle-up"></button>
<strong>NAME </strong>{{item.attribute.name}}
<div class="pf-m-expanded">Some Content
浏览 0提问于2019-01-16得票数 0
回答已采纳
1回答
在Angular 11中，如果不同的循环具有相同的数据类型，您可以将trackBy函数应用于不同的循环吗？ 例如，假设我循环遍历两个不同的Employee对象数组。我能这么做吗？ 组件： public trackEmployees(index: number, item: Employee): number {
return item.id;
} 模板： <ul *ngFor="let employee of entryLevelEmployees$ | async; trackBy: trackEmployees">
<li>{{ e
浏览 38提问于2021-05-02得票数 0
1回答
我正在解析一个xml文件，其中列出了一些服务器。
用于2服务器的示例xml：
<cluster-information>
<clustering-available>true</clustering-available>
<clustered>true</clustered>
<node>
<id>SomeIDnum</id>
<address>/someIP:port</address>
<local>
浏览 0提问于2020-01-24得票数 4
回答已采纳
我正在遍历一个数组，但只想显示元素的一个子集。
我正在使用这段代码遍历active的每个元素
<div *ngFor="let p of (active | keys)">
{{ p.name }}
</div>
下面是一些伪代码来演示我正在寻找的东西：
<div *ngFor="let p of (active | keys) where p.age > 18">
{{ p.name }}
</div>
有没有办法指定条件，以便只显示那些带有p.age > 18的条件？
我知道我可以在
浏览 7提问于2017-12-16得票数 8
回答已采纳
我有一个案例，我决定使用一个指令来访问一个ElementRef，以便通过Renderer来管理dom。
此时，由于放在*ngFor循环下的HTML元素上的dire促销，当指令调用elemenRef.nativeElement时，它会得到一整串它们(很明显，*ngFor的每一次迭代都有一个)。
是否有一种方法可以通过ID或任何类型的选择来筛选nativeElements？
谢谢
浏览 11提问于2022-10-16得票数 0
回答已采纳
我正在创建自定义表配置，我需要将一些冗长的标题名称拆分到新行中，我尝试了'\n'和<br>，但它对我不起作用。
app.component.ts
columnDefs = [
{headerName: 'Make <br> Production', field: 'make', edit:true },
{headerName: 'Model/\n\nLatest Model', field: 'model', dropdown: true },
{hea
浏览 17提问于2019-10-31得票数 0
回答已采纳
1回答
我有一个firebase变量集合，每个变量对一个用户都是唯一的。我使用一个ngFor循环将这些变量作为卡片显示给用户。用户可以单击卡上的按钮来访问有关该变量的更多信息(通过重定向到该变量特有的页面)。我的问题在于按钮功能:因为按钮是通过在组件的HTML文件中循环显示的，所以如何访问在组件的类型记录文件中单击(及其变量)的特定按钮？我是一个角度初学者，所以我不确定这是否是正确的方法。
ngFor循环：
<div fxLayout="row wrap">
<div class = 'content' *ngFor="let car
浏览 3提问于2022-01-17得票数 0
回答已采纳
1回答
我使用ngFor显示了一组图标，如下所示：
<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
<mat-icon id="iconBar"> {{category.icon}} </mat-icon>
</mat-chip>
我试
浏览 1提问于2018-02-18得票数 0
回答已采纳
有谁知道如何在*ngFor下动态创建canvas并使用这些canvas在其上创建CharJs的示例吗？
例如：
<div *ngFor="let item of Products; let i = index">
<canvas id="canvas{{i}}" #myId></canvas>
</div>
我必须使用什么来获取myId：@ViewChild？@ViewChild？如何获取元素引用以在
var chart = new Chart( =>'element'<=, {..
浏览 0提问于2018-11-09得票数 1
我想在parent component template using ngFor指令中插入一个动态的组件列表，为列表中的每个组件创建ng-template主机占位符。我尝试过的：
将插入动态组件的组件模板：
<div *ngFor="let component of components;let i = index">
<ng-template #dynamiccomponenthost></ng-template>
</div>
component.ts
@Input()
components: any;
@Vie
浏览 1提问于2020-09-27得票数 1
在angular 6中结合使用trackBy和ngFor提高性能 <app-analysis-item *ngFor="let element of analyses"
[analysis]="element"
(deleteAnalysisEvent)="onAnalysisDeleted($event)">
</app-analysis-item>
If yes why angular team don't say that ??
浏览 17提问于2019-02-06得票数 0
我正在读取一个包含以下代码行的JSON对象：
<div *ngFor= "let question of data.data>
<span >{{question.headline}}</span>
<span >{{question.question}}</span>
<span >{{question.label}}</span>
<span >{{question.question}}</span>
<
浏览 3提问于2017-09-22得票数 0
我希望将ngFor循环中的模型通过ngModel绑定到输入字段，但如果我向列表中添加另一项，则模型的值将在模型中可见，而在视图中则不可见。
<div *ngFor="let model of models">
<input [(ngModel)]="model.foo" name="foo">
{{model | json}}
</div>
<button (click)="addEmptyListItem()">add</button>
如果在视图中输入
浏览 6提问于2017-06-21得票数 0
回答已采纳
1回答
我有*ngFor与组(它的工作)，我需要显示"listofGroup“(在控制台工作，但考虑到否)，在这个特定的组中，我的问题是:如何在Angular2中的特定div中运行函数
我的html组
<div *ngFor="group in groups">
<h4>{{group.name}}</h4>
//here I want to call function where shows list in this group
//I wrote this but not working
<ul (load)=
浏览 2提问于2017-11-14得票数 2
我有一个get请求，它通过*ngFor循环在视图中显示一个对象数组。我似乎想不出如何在下面得到想要的结果。这是一个非常基本的例子，让你了解我想要达到的目标。
data = [
{
"name": "Bill",
"job" : "Builder"
},
{
"name": "John",
"job": "Cook"
},
{
"name": "Bill",
"job"
浏览 0提问于2018-10-24得票数 2
回答已采纳
1回答
我使用角2，并希望设置一个页面，其中内容显示通过一个*ngFor循环，主体是通过一个单独的div显示。这些方法使用插值来显示对象相关的属性。我想要的内容链接到相关的div在身体。
若要在左侧显示内容，请执行以下操作：
<div class = "contents">
<div *ngFor = "let disp of content">
{{disp.heading}}
</div>
</div>
将文章显示在右手边
<div *ngFor="let disp of content&
浏览 1提问于2018-01-25得票数 0
回答已采纳
3回答
paymentOptions =
[
{
"key":"COD",
"value":"COD"
},
{
"key":"ONLINE",
"value":"ONLINE"
}
];
当我使用ngFor在html文件中循环时，我在组件ts文件中有一个对象数组
<div *ngFor="let obj of paymentOptions">
<input type="c
浏览 0提问于2021-10-11得票数 1
我有一个像这样的嵌套对象：
data = [
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
浏览 0提问于2018-03-28得票数 0
如何获得ngFor的实际元素，以便在Component.ts中使用它
示例：
//.html
<div *ngFor="let element of elements">
<md-card>{{element}}
<button (click)="delete()">Delete</button>
</md-card>
</div>
//.ts
public delete() {
mydata.delete(this.ele
浏览 2提问于2017-03-07得票数 2
回答已采纳
我使用的是一个带有列标题的primeNg表，它需要将单词分成两行。到目前为止，我尝试了如下css .ui-dataTable thead h {
word-wrap: break-word !important;
}
.break-word {
word-wrap: break-word !important;
} HTML代码 <ng-template pTemplate="header">
<tr>
浏览 65提问于2021-08-09得票数 1
1回答
我有一个问题，我有所有的图像被重复每个按钮项目。我需要一个单一的图像显示为每个项目，而不是所有他们。谢谢。任何帮助都将不胜感激。
<ion-item *ngFor="let c of weapons?.weapon_category?.weapons | search : terms">
<button ion-item (click)="presentPopover($event,c)">
<img *ngFor="let v of weapons?.url_category?.url_weapon&#
浏览 1提问于2018-02-06得票数 1
回答已采纳
2回答
我有角形+ Firebase应用程序。在我的一个组件中，我从Firebase DB获取元素，并将它们绑定到*ngFor模板中：
<div *ngFor="let comment of (comments | async)>
<div>{{ comment.text }}</div>
</div>
但是每个comment都有answers列表：
如何将答案绑定到循环中，例如，如下所示：
<div *ngFor="let comment of (comments | async)>
<div>
浏览 0提问于2018-04-19得票数 5
回答已采纳
我正在从后端获得被洗牌的对象值。为了解决这个问题，我想按标题检索确切的值。但是如何将不同的ngFor循环传递给其他/
html：
<ng-container *ngIf="hfsTableSchema">
<table>
<thead>
<tr>
<th *ngFor="let header of headers; let i = index" >{{header.title}}</th>
</tr>
</the
浏览 2提问于2022-09-27得票数 0
回答已采纳
3回答
我正在尝试配置这个角/Html/JS，以便当计数器>= 5时元素开始有一个蓝色的背景
<p
*ngFor="let log of clickLog"
[ngStyle]="{backgroundColor: counter >= 5 ? 'blue' : 'transparent'}">
{{ log }}
</p>
当计数器是<= 4时，所有元素都没有按预期的样式。问题是:一旦计数器命中5，所有元素都呈现蓝色背景。我的意图是，只有元素5+有背景。
编辑:我知道我可以使用ngF
浏览 0提问于2019-08-04得票数 2
回答已采纳
1回答
我用的是角9。
我试图从一个二维数组构建一个动态表。
我有以下内容，它成功地显示了第一个元素。
<mat-card class="approval-edit-card-nominated">
Nominated Evaluators
<div>
{{nominationAllOf[0].nominations[0].evaluatorInfo.personalInfo.name.firstName}}
{{nominationAllOf[0].nominations[0].evaluatorInfo.per
浏览 2提问于2020-07-06得票数 0
回答已采纳
我对此感到非常困惑，我想要做的是在我的ionic应用程序中使用ngFor angular指令创建的动态选项列表中显示一个“预选”选项
现在我有这个
<ion-item>
<ion-label>Number of Guests</ion-label>
<ion-select>
<ion-option *ngFor="let person of gests" value="{{person.id}}" selected="{person.id[2]}">{{p
浏览 5提问于2018-02-20得票数 0
回答已采纳
我有一个组件数组，如下所示 <ng-container [ngTemplateOutlet]="controlArrayContainer"
[ngTemplateOutletContext]="{controls:control?.componentProperty?.formArray, index: i}">
</ng-container> 将上下文中的数据作为 {controls:control?.componentProperty?.formArray, index: i} 在使用数据的模板部分，如下所示 <
浏览 37提问于2021-03-28得票数 0
回答已采纳
{
"Id": "12345",
"length": [
{
"review": {
"1": {
"request": [
{
"days": "20"
}
浏览 20提问于2021-05-07得票数 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
2回答
我需要访问键“类别”、“specCategory”和“总计”--我想要将其保存到Angular2 *ngFor数组中的键和值
我该怎么做？
let data = [ { _id: { category: 'Wasser & Wind', specCategory: 'Surfen' },
min: 49, max: 500, total: 1 }, { _id: { category: 'Reisen', specCategory:
'Hotel' }, min: 49, max: 500, total: 1
浏览 2提问于2017-01-15得票数 0
回答已采纳
我今天正在学习angular，我正在努力解决这个问题： 我希望从保存在dataCountries中的api数据创建一个表，因此，我创建了一个创建行的ngFor循环。 但我也想让单元格可点击，这样用户就可以看到一个不同的组件，该组件给出了他点击的特定数据。 为此，我需要他单击的单元格的特定文本，这将足以让我为他提供他想要的信息 我的想法是将其作为参数传递给一个名为myService.goToCountry(countryName)的(单击)方法，然后在此方法上执行我的操作。 下面是我的代码： <tr *ngFor="let country of dataCountries"
浏览 21提问于2021-01-21得票数 0
2回答
我有一个*NgFor循环来编写表的行。但我只想展示前10个结果。有什么方法可以让中断/停止循环？
像这样的事：
<ng-container *ngFor="let row of rows">
<td>{{row.myCol1}}</td>
<td>{{row.myCol2}}</td>
<td>{{row.myCol2}}</td>
...
</ng-container>
浏览 2提问于2021-04-13得票数 0
回答已采纳
1回答
我正在使用角和ngbNav来创建标签。问题是，我有来自API的选项卡名，为了显示它们，我需要ngFor，但是对于选项卡的内容，我应该显示不同的组件。为了实现这一点，我使用了ngSwitch。
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem *ngFor="let element of elements" [ngSwitch]="element.name">
<a ngbNavLink>
浏览 9提问于2022-07-20得票数 1
回答已采纳
我想使用ngFor将模型数组列表显示到其他ng中，但是我遇到了一系列问题，因为我的模型的属性显然无法从HTML中识别出来。但是有些很奇怪的事情发生了，我希望你能帮我
我的界面：
export interface ShoppingCar {
username: string;
items: ItemShoppingCar[];
}
export interface ItemShoppingCar {
description: string;
price: number;
}
我的ts：
export class ShoppingComponent implements OnIn
浏览 0提问于2021-07-27得票数 0
1回答
我正在从一个外部数据库检索值到一个android应用程序中，调用服务器上的一个服务。这是php文件：
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if (!$mysqli) {
die('Connect Error (' . mysqli_connect_errno() . ') ' . sqli_connect_error());
}
$q=mysqli_query($mysqli, "SELECT title FROM post WHERE UPPER(tit
浏览 0提问于2013-02-14得票数 0
回答已采纳
1回答
我有一个注释数组字段，其中有两个对象在防火墙数据库中。
它在控制台中返回如下内容：
我尝试用下面的代码循环数组，但没有成功。我做错了什么？
HTML：
<ion-card style="margin-top: 10px !important;" *ngFor ="let comment of comments">
<ng-container *ngFor="let item of comment?.comments">
<div style="color: bl
浏览 0提问于2019-11-29得票数 0
回答已采纳
1回答
我动态绑定复选框，但不管复选框的数量，我只需要在每行显示3个复选框。我如何才能做到这一点？不仅仅是复选框，我们怎么能在Angular中的每一行中只显示3个动态数据呢？ 注意:数据将是动态的。 <table>
<ng-container *ngFor="let aar of appAccessRights">
<tr>
<td>
<ul>
<li *ngFor="let item of aar.applicationPermissions"
浏览 20提问于2019-01-19得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
