ngfor 相关问题

Angular NgFor指令从iterable中为每个项实例化一次模板。

我想从嵌套数组创建网格模板。如果元素自然具有相同的高度，则此方法有效，但当值太长时，某些元素具有不同的高度我想从嵌套数组创建网格模板。如果元素自然具有相同的高度，则此方法有效，但当值太长时，某些元素具有不同的高度 <div id="container" [style.grid-template-columns]="'repeat(outerArray.length, 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0"> <div class="outerArray" *ngFor="let inner of outerArray"> <div *ngFor="let item of inner"> {{item}} </div> </div> </div> 结果项目应该这样放置：内部 1 值 1 内部 2 值 1 内部 3 值 1 内部 1 值 2 内部 2 值 2 内部 3 值 2 内部1值3 网格看起来像这样：（有 8 个内部数组的数组）我想为列中的每个元素保持相同的宽度（但列可以具有不同的宽度），并在行中保持相同的高度。表格工作得很好，但是一个内部数组中的值填充行，而不是列，并且在我看来，表格在语义上不符合我的需要。 <table *ngIf="outerArray.length != 0"> <tbody> <tr *ngFor="let inner of outerArray"> <td *ngFor="let item of inner;"> {item}} </td> </tr> </tbody> </table> 数组有不同的大小（一开始较长，然后剩下的少一项）示例数组可能如下所示： let outerArray = [ [ "short", "bit longer", "example value" ], [ "not so long, but longer string", "short words", "bitLonger twoWords" ], [ "shorter array", "different lengths of strings" ], [ "another shorter array", "string" ] ] 数组的数量和长度可能不同，有时是 1 个 8 个元素的数组，但也可以是 8 个 2 个元素的数组。字符串有一到两个单词，但单词有时最多有 15 个字符，因此当内部数组很少时，字符串需要两行才能适合屏幕宽度我的完美解决方案是创建不嵌套的 div 并使用 css 样式正确放置它们我们只需要一组内部 div。你有一个嵌套的 div 结构，所以它弄乱了布局。我使用 ng-container 作为内部 for 循环，ng-container 的特殊之处在于它不会在 HTML 中创建元素，因此我们可以使用它来运行两个 for 循环并创建一组 div。此外，当您创建属性时[style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" ，请确保您清楚地区分字符串和 JavaScript 变量。之前的代码只会将repeat(outerArray.length, 1fr)渲染为字符串，而不是插入outerArray长度，所以我将代码更改为 'repeat('（字符串）+ outerArray.length（数字）+ ', 1fr)'（字符串）我们还需要 [style.grid-template-rows]，其配置与列相同。如果您希望所有行具有相同的高度，请使用提供的带注释的 CSS，它会向元素添加省略号并使所有单元格具有相同的高度！完整代码： import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule], styles: [` #container { display: grid; } /* .same-height { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } */ `], template: ` <div id="container" [style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" [style.grid-template-rows]="'repeat('+outerArray.length+', 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0"> <ng-container class="outerArray" *ngFor="let inner of outerArray"> <div *ngFor="let item of inner" style="background-color: red;color: white; margin-bottom:2px;" class="same-height"> {{item}} </div> </ng-container> </div> `, }) export class App { outerArray = [ ['short', 'bit longer', 'example value'], ['not so long, but longer string', 'short words', 'bitLonger twoWords'], ['shorter array', 'different lengths of strings'], ['another shorter array', 'string'], ]; } bootstrapApplication(App); Stackblitz 演示

css angular layout css-grid ngfor

回答 1 投票 0

Angular - 操作模板中的变量

我有以下创建 3x3 网格的代码： @for (i of [0, 1, 2]; 跟踪 i) { @for (j of [0, 1, 2]; 跟踪j) { 我有以下创建 3x3 网格的代码： @for (i of [0, 1, 2]; track i) { <div class="row"> @for (j of [0, 1, 2]; track j) { <div class="col-12 col-sm-6 col-md-4"> <a [routerLink]="[ mostViewedArticles[j].category + '/' + mostViewedArticles[j].id + '/' + mostViewedArticles[j].title ]" > <h5>1. {{ mostViewedArticles[j].title }}</h5> </a> </div> } </div> } 我在使用mostViewedArticles时遇到的问题，我希望索引从0到8而不是0到2，但是以我所拥有的Angular知识这是不可能的。理想情况下，我希望能够在第一个 for 循环之前声明一个变量：let index = 0，然后在第二个 for 循环结束时递增它：index++。该索引将用于访问 mostViewedArticles 中包含的数据。像这样： let index = 0; @for (i of [0, 1, 2]; track i) { <div class="row"> @for (j of [0, 1, 2]; track j) { <div class="col-12 col-sm-6 col-md-4"> <a [routerLink]="[ mostViewedArticles[index].category + '/' + mostViewedArticles[index].id + '/' + mostViewedArticles[index].title ]" > <h5>1. {{ mostViewedArticles[index].title }}</h5> </a> </div> index++; } </div> } 但是在 Angular 中似乎不可能。我们可以调整 for 循环，以便 i+j 为您提供 1 to 8 中的所有数字，请参阅以下工作示例供您参考！完整代码： import { Component } from '@angular/core'; import { RouterModule, provideRouter } from '@angular/router'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [RouterModule], template: ` @for (i of [0, 3, 6]; track i) { <div class="row"> @for (j of [0, 1, 2]; track j) { <div class="col-12 col-sm-6 col-md-4"> <a [routerLink]="[ mostViewedArticles[i + j].category + '/' + mostViewedArticles[i + j].id + '/' + mostViewedArticles[i + j].title ]" > <h5>{{i + j + 1}}. {{ mostViewedArticles[i + j].title }}</h5> </a> </div> } </div> } `, }) export class App { name = 'Angular'; mostViewedArticles = [ { category: 'test1', id: 1, title: 'test1', }, { category: 'test2', id: 2, title: 'test2', }, { category: 'test3', id: 3, title: 'test3', }, { category: 'test4', id: 4, title: 'test4', }, { category: 'test5', id: 5, title: 'test5', }, { category: 'test6', id: 6, title: 'test6', }, { category: 'test7', id: 7, title: 'test7', }, { category: 'test8', id: 8, title: 'test8', }, ]; } bootstrapApplication(App, { providers: [ provideRouter([]), ] }); Stackblitz 演示

angular ngfor angular-structural-directive

回答 1 投票 0

如何在*ngFor中使用*ngIf？ [已关闭]

我正在检查员工是否在场或缺席的状态。如果他在场，则显示一个绿色徽章，上面写着“在场”，否则显示“缺席”的红色批次。我正在检查员工是否在场或缺席的状态。如果他在场，则显示一个绿色徽章，上面写着“在场”，否则显示“缺席”的红色批次。 <tr *ngFor="let item of attendance; let i = index"> <th>{{i + 1}}</th> <td>{{item.empid}}</td> <td>{{item.first_name}} {{item.last_name}}</td> <td>{{item.date | date: 'dd-MM-yyyy'}}</td> <td *ngIf="{{item.status}} == 'present'"> <span class="badge rounded-pill bg-success">Present</span> </td> </tr> 我尝试过使用 ng-template 它不起作用。我尝试自己解决这个问题，但我需要一些帮助。花括号不是必需的。如下修改您的代码。将 <td *ngIf="{{item.status}} == 'present'"> 替换为 <td *ngIf="item.status === 'present'"> <tr *ngFor="let item of attendance; let i = index"> <th>{{i + 1}}</th> <td>{{item.empid}}</td> <td>{{item.first_name}} {{item.last_name}}</td> <td>{{item.date | date: 'dd-MM-yyyy'}}</td> <td *ngIf="item.status === 'present'"> <span class="badge rounded-pill bg-success">Present</span> </td> </tr> 您不需要 HTML 标签内的 {{}} 语法。尝试： <tr *ngFor="let item of attendance; let i = index"> <th>{{i + 1}}</th> <td>{{item.empid}}</td> <td>{{item.first_name}} {{item.last_name}}</td> <td>{{item.date | date: 'dd-MM-yyyy'}}</td> <td *ngIf="item.status === 'present'"> <span class="badge rounded-pill bg-success">Present</span> </td> </tr>

angular ngfor angular-ng-if

回答 2 投票 0

Angular 2 - ngFor-Iteration --> 点击事件不适用于 ngFor 的单个数组条目

我有一个数组，其中包含相关模板的 component.ts 中数据模型中的调查问题的已定义答案。每个答案（在数组中）的标签的模板渲染，迭代为我有一个数组，其中包含相关模板的 component.ts 数据模型中的调查问题的已定义答案。通过 *ngFor-Directive 迭代此数组，为每个答案（在数组中）渲染 <li> 标签的模板效果非常好。现在我想实现一个点击事件来切换此 <li> 标签的 EACH 的活动状态（多项选择答案）。以下标记使数组的所有项目（所有答案）都处于活动状态，NOT只有我单击的单个li标签。这是我的问题，我期待在社区的支持下解决它。 HTML 模板 <ul> <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="isActive = !isActive" [ngClass]="{'active': isActive}">{{answer}}</li> </ul> 相关组件代码 questions = { quest_1: { quest: 'my question...', answers: ['answer A', 'answer B', 'answer C', 'answer D'], },} 用于切换： isActive: boolean = false; 我尝试在 HTML 中实现点击事件的索引，但它也不起作用。预先感谢如果您想要Implement a click-event for toggle an active-state for EACH of this <li>-tag，您需要修改数组，为每个项目设置一个活动属性，例如： questions = { quest_1: { quest: 'my question...', answers: [ {text: 'answer A', active: false}, {text: 'answer B', active: false}, {text: 'answer C', active: false}, {text: 'answer D', active: false} ], } } 对于 html： <ul> <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="answer.active = !answer.active" [ngClass]="{'active': answer.active}">{{answer.text}}</li> </ul> Martin 的回答几乎没问题，但我会稍微改进一下。我估计会有只有一个正确答案，所以最好设置为active只有点击的那个，而其余的则保留inactive。 this.questions.quest_1.answers.forEach(v => v.active = false); 工作笨蛋将选定/单击的 id 作为单独的组件进行跟踪 <ul> <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="toggleOptionsMenu(answer.id)" [class.show-more]="answer.id === selectedId">{{answer}}</li> </ul> selectedId = null; toggleOptionsMenu(id) { this.selectedId = id; }

angular ngfor

回答 3 投票 0

NgFor 在 Accordion 中扩展数据时出现的问题

我一直在尝试使用顺风的手风琴显示一系列帖子。当我控制台记录帖子时，帖子数组就在那里，但似乎存在扩展手风琴的问题。这...

angular tailwind-css accordion ngfor

回答 1 投票 0

NgFor 在顺风手风琴中

我一直在尝试用顺风手风琴展示一系列帖子，但它没有按预期工作。创建帖子时，手风琴将显示标题，但不会扩展到 sh...

angular tailwind-css ngfor

回答 1 投票 0

Angular [错误] NG9：组件 AppComponent 的模板中发生属性错误

当我尝试在 Angular 中使用 for 循环时，我收到一条错误消息这是我在 app.component.html 中的代码当我尝试在 Angular 中使用 for 循环时，我收到一条错误消息这是我的代码 app.component.html <app-story @for="let i of [0,1,2,3]" [img]="postImgs[i]" [text]="postText[i]"></app-story> 我也尝试这个 <app-story *ngFor="let i of [0,1,2,3]" [img]="postImgs[i]" [text]="postText[i]"></app-story> 这是我的代码 app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import {HeaderComponent} from './header/header.component'; import {StroyComponent} from './stroy/stroy.component'; import { NgModel } from '@angular/forms'; import { CommonModule, NgForOf } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, HeaderComponent, StroyComponent, NgForOf,CommonModule], templateUrl: './app.component.html', styleUrl: './app.component.scss'}) export class AppComponent { title = 'CatsBookProject'; postText =[ 'Hello , i am here to meet new friends and make a friends relationship', 'Hello everyone, Iam glad you are here', 'Hey, my name is Susanne. I amm 2 years old', 'I like eating cookies.']; postImgs =[ 'assets/Imge/img1.png', 'assets/Imge/im21.png', 'assets/Imge/img3.jpg', 'assets/Imge/img4.jpg',]; buttonClicked(){ alert("What's up");}} 这是错误消息我使用 Angular 版本 17.2.3 也许有人知道我的代码出了什么问题非常感谢请查看有关新语法的文档。这就是您的示例的样子... @for (let i of [0,1,2,3]) { <app-story [img]="postImgs[i]" [text]="postText[i]"></app-story> }

angular angularjs typescript ngfor

回答 1 投票 0

Angular 错误 NG0303 在 Angular 项目的 app.component.html 中使用 NGFor

我想在 Angular 中使用 for 循环，这是我在 app.component.ts 中的代码导出类 AppComponent { 标题 = 'CatsBookProject'; 帖子文本=[ '你好，我来这里是为了结识新朋友......

angular typescript ngfor

回答 1 投票 0

我应该何时以及如何在 Angular 的 ngFor 指令中使用 trackBy 以获得最佳性能？

我正在寻求有关使用 Angular 的 ngFor 指令来提高性能的 trackBy 函数的说明。虽然我了解 ngFor 的基础知识及其对数组的迭代来生成

angular performance optimization ngfor angular-directive

回答 2 投票 0

Angular ngFor flex-grow

Angular 似乎在 dom/html 中插入了额外的元素，导致 flex-grow 无法应用于正确的元素。存在一个完全工作的硬编码版本，但我正在努力制作......