ngfor 相关问题

减少 ngFor 循环内的相同函数调用

在 ngFor 循环中，有 3 个相同的函数调用 - processStatus(status)。有没有办法通过将其保存在参数中，在 for 循环内仅调用一次，然后引用该参数

同一组件中的多个 *ngFor trackBy 函数

我在 Angular 项目的 *ngFor 指令上添加了一些 trackBy 函数，以提高性能。 有一个组件有 2 个项目列表。 trackBy 函数对于这两个列表都是相同的...

通过在输入中搜索来过滤对象数据 |角

使用输入过滤数组内的内容，而不使用 Pipe。 大批 { "passengerId":"整数", "幸存":"整数", “P类”：“

错误：NG0900：尝试比较“[object Object]”时出错。 Angular 15 中仅允许数组和可迭代对象

下面提到的代码在控制台中显示数据，但在页面中不显示 contactus.component.html ... 下面提到的代码在控制台中显示数据，但在页面中不显示 contactus.component.html <div class="section"> <div class="container p-2"> <div class="row pb-5"> <div class="col-lg-3 col-md-6" *ngFor="let query of contactUsQueryData"> <div class="card "> <div class="card-body"> <h5 class="card-title">{{query.Department}}</h5> <p class="card-text">{{query.Email}}</p> </div> </div> </div> </div> </div> </div> contactus.component.ts import { Component, OnInit } from '@angular/core'; import { ContactusService } from '../../Service/contactus.service'; @Component({ selector: 'app-contactus', templateUrl: './contactus.component.html', styleUrls: ['./contactus.component.css'] }) export class ContactusComponent implements OnInit{ contactUsQueryData:any[] =[]; constructor(private _contactusqueryServices: ContactusService){} ngOnInit(): void { this._contactusqueryServices.getcontactUsQuery().subscribe(data=>{ this.contactUsQueryData=data; console.warn(data); }); } contact.service.ts import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { environment } from 'src/environments/environment'; import { QueryContact } from '../models/contactus'; @Injectable({ providedIn: 'root' }) export class ContactusService { private contactusquerypath='contactusqueries'; constructor(private http: HttpClient) {} getcontactUsQuery():Observable<QueryContact[]> { return this.http.get<QueryContact[]>('http://localhost:1337/api/contactusqueries'); } } 它显示为如下错误 在控制台中，数据以数组格式出现，但在页面中未显示 从您的屏幕截图来看，您的响应是一个对象而不是数组。您应该从 data 字段中提取数组。请注意，在每个对象中，都有一个 attributes 字段，我相信您想要提取它。 { "data": [ { "id": 1, "attributes": { "Deptartment": "Dep 1", "EmailAddress": "[email protected]" } }, { "id": 2, "attributes": { "Deptartment": "Dep 2", "EmailAddress": "[email protected]" } } ] } getcontactUsQuery(): Observable<QueryContact[]> { return this.http .get<any>('http://localhost:1337/api/contactusqueries'); .pipe( map((x: any) => x.data.map((y: any) => y.attributes) as QueryContact[]) ); } 此外，您还需要根据 JSON 响应架构修改模型/接口和视图，因为当前这些字段（名称）不匹配。 export interface QueryContact { Deptartment: string; EmailAddress: string; } <h5 class="card-title">{{query.Deptartment}}</h5> <p class="card-text">{{query.EmailAddress}}</p> 演示@StackBlitz

ngFor 循环中的重复数据 Angular 16

我有一个 ngFor 循环，在 ionic 6 搜索栏中包含重复的数据。我已经证明了“trackBy”和“map”。 我知道这个网站上有相同的主题，但是是 2020 年的并且......

单击时从 Json 获取值以过滤数组

我有这个 json，我需要使用 Angular 根据下图进行转换。 我能够使用 *ngFor 列出数据（下面附有图像），我想在单击时显示类别。 ...

Angular - 如何显示或循环数组数组

我想显示其中包含数组的数组列表。 我有如下带有虚拟数据的数组 [ [ { "日期": "9 月 11 日", &...

在模板中动态加载元素时，如何让 Angular 理解我所指的元素？

我必须制作一个组件，在单击添加按钮时动态创建垫选择。 重点是用户可以从每个 mat-select 中选择一个值，然后所有内容都会发送到 pa...

如何滚动到ngFor中指定的组件选择器？

我在同一页面的 *ngFor 内运行多个组件。我想在页面顶部有几个按钮链接，单击后可以滚动到该组件。 这是我要的代码...

ng对于不在动态加载的组件内工作

我的 16.1.4 角度应用程序正在动态加载组件。在该组件内我有一个数组并尝试使用 ngFor。 ngFor 不会显示任何内容。如果我显示...

ngFor 带键值管道：类型“unknown”不可分配给类型“NgIterable<any>”

我正在尝试迭代这个对象 { “2021-11-22”：[ { “id”：1， “标准ID”：2， “用户id”：4， “主题ID”：1， &

检测更改不适用于特定页面

我面临的问题是 detectorChanges() 不适用于组件，我认为只有我的本地服务器运行才是问题，但我尝试使用 SWAPI 来运行测试，这是我的

ngFor 将字符串文字类型转换为字符串，抛出“元素隐式具有 'any' 类型，因为无法使用 'string' 类型的表达式......”

使用迭代器 *ngFor 将字符串联合文字类型（“apple”|“banana”）转换为字符串类型。当我将它用作数组的索引并期望正确的字符串并集时...

如何使用 ngFor 循环遍历数组的切片？

我正在创建一个带有手风琴按钮的常见问题解答页面，子标题下有一组按钮。我使用 faq.html 文件中的 ngFor 语句来设计它。 常见问题 我正在创建一个带有手风琴按钮的常见问题解答页面，子标题下有一组按钮。我使用 faq.html 文件中的 ngFor 语句来设计它。 <h1>Frequently Asked Questions</h1> <div *ngFor="let item of data; let i = index;"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button> <div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive"> <p> {{child.propertyName}} </p> </div> 这是 faq.ts 文件的片段。 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-faq', templateUrl: './faq.html', styleUrls: ['./faq.scss'] }) export class FaqComponent implements OnInit { data: any = [ { parentName: 'Question 1A', childProperties: [{ propertyName: 'Answer 1A' }], }, { parentName: 'Question 2A', childProperties: [{ propertyName: 'Answer 2A' }], }, { parentName: 'Question 3A', childProperties: [{ propertyName: 'Answer 3A' }], }, { parentName: 'Question 1B', childProperties: [{ propertyName: 'Answer 1B' }], }, { parentName: 'Question 2B', childProperties: [{ propertyName: 'Answer 2B' }], }, ]; } 我想将子标题放在 A 部分（问题 1A、2A 和 3A）和 B 部分（问题 1B 和 2B）之上。我想我可以在 faq.html 的 ngFor 语句中使用 slice，但代码无法编译。 我尝试了这个切片管： <div *ngFor="let item of data | slice:0:2; let i = index;"> 我应该更改什么才能使其编译并分解常见问题解答部分？切片管是正确的选择吗？ 分割您的数据 这里的问题是切片管道以 unknown 类型返回数据。有几种方法可以解决这个问题： $任意 <p *ngFor="let item of data | slice:2:4"> {{ $any(item).parentName }} </p> 括号符号 <p *ngFor="let item of data | slice:2:4"> {{ item['parentName'] }} </p> 一个功能 slicedData(data : any[]) : any[] { return data.slice(2,4) } <p *ngFor="let item of slicedData(data)"> {{ item['parentName'] }} </p> 不过，您可能想正确输入数据，而不是使用任何数据。毕竟它被称为 Typescript 是有原因的。 以下是 Stackblitz 中的一些示例。 我必须更改 html 才能以不同的方式访问属性，并且它已编译： <div *ngFor="let item of data; let i = index;"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item['parentName']}} </button> <div class="panel" *ngFor="let child of item['childProperties'] | slice:0:2; let i = index;" hide="!item.isActive"> <p> {{child['propertyName']}} </p> </div> 您只需添加一个 *ngIf 并检查是否 i < 3: <h1>Frequently Asked Questions</h1> <div *ngFor="let item of data; let i = index;"> <ng-container *ngIf="i < 3"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button> <div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive"> <p> {{child.propertyName}} </p> </ng-container> </div> 谢谢大家的帮助。我将 faq.html 更改为： <h1>Frequently Asked Questions</h1> <h2>General</h2> <div *ngFor="let item of data; let i = index;"> <ng-container *ngIf="i < 3"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button> <div class="panel" hide="!item.isActive"> <p> {{item.childName}} </p> </div> 并且成功了。 在您的 .ts 组件中，声明变量如下 数据：任何[] = [ { ParentName: '问题 1A', childProperties: [{ propertyName: '答案 1A' }], }, { ParentName: '问题 2A', childProperties: [{ propertyName: '答案 2A' }], }, { ParentName: '问题 3A', childProperties: [{ propertyName: '答案 3A' }], }, { ParentName: '问题 1B', childProperties: [{ propertyName: '答案 1B' }], }, { ParentName: '问题 2B', childProperties: [{ propertyName: '答案 2B' }], }, ];

Angular 6 尝试比较“[object Object]”时出错。仅允许数组和可迭代对象

我认为我的问题是 API 提供的是对象而不是数组。那么我需要将对象修改为数组吗？ 这怎么可能做到呢？ 对象.分配？ 还是管道？ 有没有人有合适的e...

ngFor 指令是否会在每次突变时重新渲染整个数组？

假设我们有一个项目数组： 项目=[ { 标题：'第 1 项'}， { 标题：'第 2 项'}， /* ... */ ]; 并且有一个呈现此数组的模板： 假设我们有一个项目数组： items = [ { title: 'item 1'}, { title: 'item 2'}, /* ... */ ]; 并且有一个渲染此数组的模板： <ul> <li *ngFor="let item of items">{{item.title}}</li> </ul> 如果我通过 push/splice 添加/删除项目，Angular2 会重新渲染整个数组，还是只会添加/删除相应项目的标记？如果它只更新，那么突变策略有什么区别——我应该更喜欢推送/拼接而不是数组替换吗？换句话说，这两种方法在渲染性能方面是否等效： /* 1: mutation */ this.items.push({ title: 'New Item' }); /* 2: replacement */ var newArray = this.items.slice(); newArray.push({ title: 'New Item' }); this.items = newArray; 除了 Gunter 的回答之外，如果您想知道 UI 的哪一部分被渲染/重新渲染，您可以使用 Chrome（甚至独立于任何库/框架）： 打开调试面板 菜单（调试面板）/更多工具/渲染 然后您应该看到以下面板： 打开 Paint Flashing 选项，并享受您的列表的乐趣。 如果某个区域呈绿色闪烁，则表明该区域已被涂漆/重新涂漆👍. EX ：如果您在 Gunter 的答案中使用 Plunkr ： http://plnkr.co/edit/oNm5d4KwUjLpmmu4IM2K?p=preview 并打开 Paint Flashing，将一个项目添加到列表中，您将看到上一个项目项目不闪烁。 （这意味着没有重新绘制）。 否 ，仅当数组本身被不同的数组实例替换时，它才会重新渲染。 更新 感谢 Olivier Boissé（见评论） 即使传递了不同的数组实例，Angular 也会识别它是否包含相同的项目实例，并且即使这样也不会重新渲染。 另请参阅此 StackBlitz 示例 如果使用的 IterableDiffer 识别并在开头或中间添加或删除，则在该位置插入/删除项目，而不重新渲染所有其他项目。 Plunkers 中演示的动画在这个问题的答案中如何在 Angular 2 中为 *ngFor 制作动画？也演示了这一点。事实上，这种动画是以这种方式实现的驱动因素（除了一般优化之外） 在 Angular 10 中，即使之前的项目未受影响，我的整个元素列表也会重新渲染。我在 ngFor 中使用了 trackBy 并解决了问题。 你可以这样使用它<li *ngFor="let chatMessage of chatMessages; trackBy: trackChatMessage"> 然后在 .ts 文件中添加返回唯一值字符串的函数 trackChatMessage。 trackChatMessage(index: number, chatMessage: ChatMessage) { return chatMessage.id; }

Angular ngModelChange 显示 API json 数据中的重复值

更新：我已在 Stackblitz 上为那些想要与代码交互的人重现了该错误。我有以下 JSON 数据： 相关联系人：[ { “id”：1， ”

如何从 NgForm 中正确获取嵌套对象？

我需要从 ngForm 中正确获取键值。 我在 Angular 中有一个这样的用户界面： 导出接口用户{ 编号：整数； 名称：字符串； 姓氏：字符串； 学校：学校； } 和学校

*ngIf inside *ngFor [关闭]

如果员工在场或缺席，我正在检查状态。如果他在场，则显示一个绿色徽章，上面写着出席，否则显示红色批次，缺席。 如果员工在场或缺席，我正在检查状态。如果他在场，则显示一个绿色徽章，上面写着出席，否则显示红色批次，缺席。 <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>

Type 'Array' 不可分配给类型 '(ngForOf: NgIterable<any> | null | undefined) => any'

在非常简单的数组中使用 *ngFor 指令时，此错误开始显示。我很困惑我一直在使用它有什么问题 收到错误后，我尝试简化 Varia ...