使用ngFor打印对象
使用ngFor是Angular框架中的一个指令，用于在模板中循环遍历一个集合，并为每个元素生成相应的HTML代码。在这个问题中，我们使用ngFor来打印对象的属性。
首先，我们需要在组件中定义一个对象，例如：
obj = {
name: 'John',
age: 25,
profession: 'Engineer'
};然后，在模板中使用ngFor指令来遍历对象的属性，并打印出属性的名称和值：
<div *ngFor="let key of Object.keys(obj)">
{{ key }}: {{ obj[key] }}
</div>这样，ngFor会遍历对象的属性，并为每个属性生成一个div元素，其中包含属性的名称和值。最终的输出结果将会是：
name: John
age: 25
profession: Engineer这种方式可以用于打印任意对象的属性，无论对象有多少个属性都可以正确显示。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），腾讯云对象存储（COS）
相关·内容
dataset: any = {
"days": [
{
"datevalue":1,
"status":"disable",
"addclass":"notallowed",
"avability":[]
},
{
"datevalue":2,
"status":"disable",
浏览 4提问于2020-06-05得票数 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
当尝试通过ngFOR遍历for循环来打印自定义对象时，双引号也会被打印出来。这是我的循环。值是这样打印的，而我希望它们看起来像METRO一样正常
<ion-list>
<ion-item-group *ngFor="let g of tp.LegList">
<table width="100%" border="0">
<tbody>
<tr>
<th>
<ion-card>
浏览 8提问于2017-01-20得票数 0
回答已采纳
1回答
这是我的密码：
import { Component } from '@angular/core';
import { ProjectService } from '../../services/project';
import { Project } from '../../models/project';
@Component({
selector: 'projects-component',
template: `
<pre>{{ projects | json }}</p
浏览 0提问于2018-05-08得票数 0
回答已采纳
我的数据
我的组件
ngOnInit() {
this.current = db.list(`products/${this.product['sku']}/data/config`).valueChanges();
}
我的模板
<ng-container *ngIf="current">
<div *ngFor="let set of current|async">
<!-- this level works as expected -->
<
浏览 0提问于2018-06-19得票数 0
2回答
打印对象数组
、、、
我想在我的模板上打印一个对象数组，但是我遇到了一些问题。这是包含数组historico的json。
{
"id": 2,
"tipo_negociacao": "Cobrança",
"historico": [
{
"fl_usuario": "",
"created_at": "",
"updated_at": "",
浏览 3提问于2017-04-07得票数 2
回答已采纳
3回答
我正在工作的颜色选择器，在这里我需要选择10种颜色，我需要显示的价值，尽快颜色选择器选择。当我们选择for循环时，它正在更新值，但是当我们直接打印值时，它不是更新值。请查看下面的链接-
我可能漏掉了什么。但无法得到。让我们假设颜色是数组对象和<span>{{colors}}</span>，这不会改变值<span *ngFor="let c of colors">{{c}}</span>，这个值正在正确地更新。
为什么它不更新，如果我只打印颜色。谢谢
浏览 0提问于2018-08-28得票数 0
回答已采纳
我有一个组件数据的下一个结构：
我想使用assignedCards在组件视图中使用*ngFor打印一个列表。我这样做是可能的：
<div *ngFor="#item of mission.assignedCards" class="b-progress-bar__item m-progress-bar__item_completed">
<div class="b-progress-bar__inner">{{item}}</div>
</div>
但也有例外：
如果我测
浏览 1提问于2016-03-23得票数 3
回答已采纳
我下面有一个API URL，我必须在我的html组件上打印数据，请让我知道如何打印的方法。我有下面的方法，所以我必须打印字符串例如。page_tilte
resData;
newsdata;
ngOnInit() {
const url="https://tiavik.com/maken/api/aboutUs";
this.http.get(url).subscribe(res=>{
this.resData=res;
this.newsdata=this.resData.Data
console.log(res);
})
我在我的html中使用了以下内
浏览 0提问于2020-08-03得票数 0
3回答
这里是我的JSON数据，我想将“2018年1月4日”打印为列表标题，并将描述作为列表的内容。如何使用*ngFor --这个数据
当我使用*ngFor="let item of timeline data"时，我得到了一个错误
cannot find a differ supporting object '[object object]' of type 'object'. ngfor only supports binding to iterables such as arrays
以下是数据：
{
"msg": "
浏览 0提问于2018-02-07得票数 0
回答已采纳
1回答
角4倍环通过多维阵列
、、、、
我有一个有两个键的多维数组，看起来是这样的。
user: any = {};
// index is from a for loop to add to the user (this part works perfectly)
this.user[index++] = {
Name: name,
Age: age,
}
然而，我的问题是，我想使用*ngFor在我的角HTML模板中循环，但是我收到一个错误，说它不支持它。所以我的问题是，如何循环遍历这个用户数组，并打印出数组中每个键的名称和年龄值？
我的尝试：
<li *ngFor="let user of users
浏览 0提问于2017-08-13得票数 0
回答已采纳
1回答
我目前正在学习棱角和打字稿，我还不知道多少
我有一个表，它用ngFor显示来自对象数组的数据。
<tbody *ngFor="let book of tableBooklist">
<tr>
<td>{{book.title}}</td>
<td>
<button (click)="toggleModal()" class="btn btn-link">{{book.author.nameAut + ' ' + book.aut
浏览 0提问于2022-07-14得票数 0
回答已采纳
下面是有问题的组件：
@Component({
selector: 'my-app',
template: `
{{tests | json}}
<div *ngFor='let test of tests'>
<div *ngFor='let x of test.A.B'>
<div *ngFor='let y of x.C.D'>
writerid:{{y.writerid}} <br>
浏览 3提问于2017-04-05得票数 0
5回答
有什么方法可以在Angular2中将变量传递给模板吗？
假设我有以下代码：
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner"</ng-container>
</div>
---------------
<ng-template #inner>
{{ foo.name }}
</ng-template>
如何获得打印name of foo的模板？
浏览 5提问于2017-05-01得票数 27
回答已采纳
所以我正在练习一些Angular/Ionic，我有点难弄明白为什么我的*ngFor不能显示我的数据。这对我来说似乎很简单，但我想我正在做一些非常错误的事情。
所以我有一个看起来像这样的item.interface.ts：
export interface Item {
id: string;
name: string;
}
如下所示的items.ts：
export default [
{
items:[
{
id:'1',
name:'Milk'
浏览 0提问于2017-12-31得票数 0
回答已采纳
模板(html)
<div *ngFor="let item of toArray(observerable_val)">
{{item.name}}
</div>
组件
toArray(obj_obj) {
const arr_obj = Object.values(obj_obj);
return arr_obj;
}
问题
由于ngFor不会遍历对象，因此我制作了此函数来将obj of obj转换为arr of obj...这看起来很好用，但是当我在toArray()中输入console.log时，我注意到它一直在无限期地打
浏览 0提问于2018-06-19得票数 0
3回答
我正在尝试获取一个标签数组，以便在我的模板中正确打印标签。我有这个：
<div *ngFor="let tweet of tweets | async">
<p>
{{ tweet.msg}}
</p>
<p>
{{ tweet.username }}
</p>
Tags:
<div *ngFor="let tag of tweet.tags">
{{ tag }}
</div>
<
浏览 44提问于2018-06-29得票数 1
回答已采纳
2回答
我从套接字接收到一个对象，我想使用*ngFor将它打印到屏幕上。我在控制台中看到以下错误
角度ts
ngOnInit() {
console.log('ngOnInit');
this.socket.on('online',(people:number)=>{
console.log('online:',people);
})
this.socket.on('message',(data:any)=>{
console.log('socket-emit:',data);
})
this.sock
浏览 0提问于2019-01-28得票数 1
3回答
角8嵌套对象插值
、、、、
这是我的角度CLI的版本：
Angular CLI: 7.3.9
Node: 12.2.0
OS: win32 x64
Angular: 8.0.2
在创建角8应用程序时，我尝试使用与以下对象对应的嵌套FormGroups：
const Boilerplate: any = {
1: {
desc: "section1",
content: {
1: "question 1.a:",
2: "question 1.b:",
3:
浏览 3提问于2019-06-26得票数 3
回答已采纳
1回答
我有Json文件嵌套的数据，数据在数组中的数组中，有些数组有2个数组，有些有4个，有些文件夹没有数组。如果在2,3,4和嵌套的2或4中，我想打印所有的数组数据。
我使用循环内的.i循环在角度上打印3个数组数据，使用3个for循环和3次数据打印
<ul *ngFor="let bird of parts_">
<li>{{bird.name}}</li>
<li [ngStyle]="{'color': bird.type == 'folder' ? 'red'
浏览 1提问于2019-06-14得票数 0
2回答
我有一个带有嵌套数组的对象数组，如下所示。如何使用ngFor在表中打印嵌套数组值。该数组如下所示：
我使用一个表来打印这个值，这样我就可以将表导出到Excel工作表中。
该表如下：
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Hours</th>
<
浏览 10提问于2020-08-31得票数 0
回答已采纳
我必须使用从FormBuilder收集的数据创建新对象。主要问题是，输入是通过*ngFor指令创建的，这意味着有时会有两个、三个、四个甚至更多这样的输入。
<form [formGroup]="formType"
(ngSubmit)="onSubmit()">
<div
<div>
<button >Select column type</button>
<div>
<button *ngFor=&#
浏览 0提问于2021-05-07得票数 0
我有一个带有客户端属性的组件。 import { Component } from '@angular/core';
@Component({
selector: 'app-update-view',
templateUrl: './update-view.component.html',
styles: [
]
})
export class UpdateView {
public client: string[] = ['client 1', 'client 2', 'clie
浏览 49提问于2021-10-25得票数 1
回答已采纳
1回答
如何迭代角度2中的集合
、、、、
我正在编写一个应用程序，它拥有RESTful web服务，用于后端连接mysql db，前端在Angular2中，从后端我得到一个SET，其中包含一些与用户相关的信息。
由于我必须显示集合中的值，所以必须在前端进行迭代并获得值。
我如何迭代在任何角度的项目(app.component.html，中的html文件中，我正在写这个名字，因为它是每个项目共同的)。？？
任何输入都会被占用。
附“守则”：
<ul>
<li *ngFor="let user of users">
{{user.username}}
浏览 2提问于2018-01-03得票数 0
在组件中，我有一个对象如下所示：
statuses = {
'accepted' : 'در حال حرکت به سمت مبدا',
'picking' : 'در حال دریافت مرسوله',
'delivering' : 'در حال حرکت به سمت مقصد',
'delivered' : 'در حال تحویل دادن مرسوله'
};
在html中：
<div *ngFor="
浏览 0提问于2018-03-08得票数 1
回答已采纳
我已经在我的数据库列中保存了一个JSON字符串。现在，在检索它的时候，我得到了一个完整的字符串打印，但具体的变量。
以下是模板
<!-- The card -->
<ion-card *ngFor="let comment of feed[0].meta.comments">
<div *ngIf="comment.comment_by" class="card-title"></div>
<div class="card-subtitle&#
浏览 0提问于2018-05-13得票数 0
回答已采纳
3回答
export class AppComponent {
pickBtnClicked = false;
selectedPickNumber: 'string';
selectedRegion: 'string';
currentPickSelection: any[];
channelList: any[];
constructor(private pickGroupService: PickGroupService, private channelsService: ChannelsService) {}
onPkClick(
浏览 6提问于2017-12-09得票数 0
回答已采纳
2回答
我试图将数组元素从类绑定到选项标记。
在angular.io“英雄之旅”教程( )中，他们为列表做了以下操作：
<li *ngFor="let hero of heroes"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
如果我正确理解，*ngFor=“让英雄英雄”会将每个英雄(因此英雄数组中的每个元素)关联到一个li元素，然后显示相关英雄的一些特征，
浏览 4提问于2016-07-19得票数 2
回答已采纳
7回答
我在JSON下面，我想从中提取技能，这是真的.
[
{
"_id":"5de9f351baca28556c6a4b71",
"Name":"Harsha",
"Age":20,
"Gender":"M",
"Skills":{
"Java":"",
"Mule":true,
"Ang
浏览 9提问于2019-12-06得票数 6
回答已采纳
4回答
我在这个表单中有一个嵌套数组
tests: [
[{name:"Bob",score:40,subject:"Math"}, {name:"John",score:55,subject:"Math"}],
[{name:"Alice",score:70,subject:"English"},{name:"John",score:68,subject:"English"}]
],
// ...
我想循环并打印，同时将相同的主题组合在一起，如：
<div *
浏览 0提问于2018-12-22得票数 2
回答已采纳
在这种情况下，我从数据库接收数据对象，其中包含文件版本的记录。可能有5个版本(5个记录)或一个版本返回。
我的问题是，我使用ngFor循环数据数组并将它们打印到表中。如果只返回一个记录，则数据不再是对象数组，而只是单个对象。
<tbody class="ruleVersions">
<tr *ngFor="let m of mapData.ruleVersion.x">
<td class="small">V {{ m.RuleVersion }}.0</td>
<td [inner
浏览 2提问于2017-08-09得票数 2
回答已采纳
我正在使用
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
来打印html格式的值。但是我需要以表格的形式打印出来
假设我们总共有8个键值对，现在我想在第4个键值对之后创建新的行，这样它就应该是这样的
a a a a
a a a a
我们可以动态地做吗，键值对可以是12或16，4的倍数
浏览 3提问于2020-06-11得票数 0
2回答
我有一个嵌套对象数据-
"data": {
"serial": "123",
"def": {
"id": "456",
"data": {
"firstname": "abc",
},
"method": "post",
},
浏览 1提问于2021-03-29得票数 0
回答已采纳
1回答
我在将对象推入数组时遇到了问题。我有一个数组，里面有对象。此组件将其打印出来：
<div class="row"
*ngFor="let element of dietList">
{{element.name}} {{ element.weight }}
</div>
第二，将对象添加到数组中，但我可以添加各种类型的对象，如:大米、鸡肉等等。所以我创建了另一个包含object的数组。此数组不包含wieght，因为用户可以检查自己的值。因此，在第二个组件中，我打印产品名称并输入本地引用
<div *ngFor="let
浏览 0提问于2017-12-17得票数 0
2回答
这是我的console.log，但我只能访问名称而不能访问消息，我可以打印名称，但是当我试图打印页面上的消息时，当我打印数据时，想要删除-LCE-36m4sdrPGFPM6：
//产出
messages:
-LCE-36m4sdrPGFpusM6:
date:"2018/5/11"
haveConsultant:true
hour:"12:40"
message:"hi"
name:"Teste chat 2"
我的代码打印这个输出的角度来自火基，我如何才能访问消息嵌套数组？
getUsersChat() {
浏览 0提问于2018-05-11得票数 1
回答已采纳
1回答
我想在我的HTML代码中打印每个翻译的数据
我从api中收到了这种数据格式：
{"Data":
[
{
"Code":"Hello",
"TraductionsFormat":
[
{
"Code":"Hello",
"Lot":3,
"Description":null,
"Id":1,
"IdLangage":
浏览 5提问于2022-04-07得票数 0
回答已采纳
3回答
我循环遍历产品列表，然后检查产品Id是否已经存在于产品(对象)数组中，如果产品不在对象中，则打印数量，然后尝试打印0。下面是我到目前为止已经尝试过的代码。
<ion-item class="added" *ngFor="let item of fetchProducts();let key=index;">
<ng-container *ngFor="let cartitem of cart" >
<span class="count" *ngIf="cartitem.p_id
浏览 1提问于2019-12-03得票数 0
1回答
ngFor -按索引打印数组项
、、、、
我有一个ngFor循环，它循环遍历对象列表(称为配置)，并打印每个对象的数据。
我的TypeScript文件中也有一个数组，我也想打印它。数组的长度与“configs”列表的长度相同(并且将始终具有相同的长度)。下面是我的HTML文件的ngFor：
<button *ngFor="let config of configs; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn
浏览 6提问于2016-07-01得票数 4
回答已采纳
我想通过打印列表的内容，同时打印I和i+1元素。这是一个用Java或任何后端编程语言进行操作的虚拟示例：
List list = new ArrayList<>();
for(int i = 0; i<list.size() - 1; i++)
System.out.println(list[i] + " " + list[i+1]);
我想要的是使用ngFor指令在角度上实现同样的行为。我试着使用索引，但由于某种原因，我无法让ngFor迭代直到length -1元素。
编辑:要更具体地说明这个问题：
<div class="row"
浏览 0提问于2018-10-22得票数 1
回答已采纳
1回答
我试图从一个二维的对象数组中打印一个表，其中包含一个属性“text”。它只打印表行，遍历字段不起作用。
我的component.html看起来是这样的：
<section *ngIf="object">
<table>
<tr *ngFor="let row of array; let even = even; let odd = odd"
[ngClass]="{ odd: odd, even: even }">
<td class="fi
浏览 2提问于2017-12-12得票数 3
回答已采纳
1回答
我正在执行一个休息服务的角度。一切都很好。影片是一个JSON对象，您可以在下面看到图片的打印。我无法在框(ngif)中打印结果，但可以在ngfor中打印结果。就像我说的，一切都很好，除了这个：
<button (click)="getFilm(title.value); title.value=''">Buscar Pelicula</button>
<div class="col-md-6">
<div class="list-group">
<p
浏览 0提问于2018-05-23得票数 0
回答已采纳
我对角质很陌生。我已经创建了一个服务类，它以json格式返回产品详细信息。
api.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ApiService {
constructor(private http: Http) { }
fetchData() {
return t
浏览 0提问于2018-02-03得票数 1
回答已采纳
1回答
<tr *ngFor="let a of arrayOfObjects">
<td *ngFor="let item of cfValues | keyvalue">
{{item.value}}
</td>
</tr>
我只是尝试按常规顺序打印项目，但是key/value管道会根据索引进行默认排序。是否有禁用默认排序的方法？
浏览 1提问于2019-01-08得票数 20
回答已采纳
2回答
我希望在嵌套的for循环中增加一个计数器值，并在加载表时打印这个值(比如1、2、3、4)。但问题是，我的对象中有不同长度的值。假设表中有100行，所以计数器列必须打印1-100行。
<ng-container *ngFor= "let lot of all;">
<tr *ngFor="let sensor of lot.income;" >
<td>{{count++}}</td> // counter here
<td>{{lot.proje
浏览 0提问于2019-04-10得票数 0
回答已采纳
2回答
您好，我想将Json字符串中的RestController响应转换为json数组，这是我在控制台中打印的json数组字符串。
'{"Impressions":["Budget","CTR","Campaign","Campaign state","Clicks","Conv. rate"],"Clicks":["Budget","CTR","Campaign","Campaign state",&
浏览 1提问于2018-08-09得票数 2
将Book类定义为： class Book {
id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
} 我继续创建Observable对象books$ const book1: Book = new Book(1, "Title 1");
const book2: Book = new Book(2, "Title 2");
function booklist(obser
浏览 33提问于2020-07-19得票数 0
回答已采纳
我使用的是离子4，我试图通过TransportAPI通过http.get获得一个JSON数组，但是，它们使用整数字符串作为我试图获取的对象的键，然后每个对象有多个数组，如下所示：
{
"departures": {
"25": [
{
"mode": "bus",
"line": "25",
"departure_time": "12
浏览 1提问于2019-04-18得票数 2
回答已采纳
当登录无效时，将收到以下响应。
Response {
_body: "{
"email": ["The email field is required."],
"password":["The password field is required."]
}",
status: 422, ok: false, statusText: "Unprocessable Entity", headers: Headers
}
我想向UI中的用户显示错误。这是我可观察到
浏览 9提问于2017-04-17得票数 1
回答已采纳
嗨，目前我有使用angular 5和typescript开发的UI。在我的一个组件中，我有一个反应式窗体，而在组件视图中，我有一个选择框窗体控件。所以我想要的是，每当我从选择框中选择一个不同的选项时，它都应该打印出所选择的值。因此，我在组件类中注册了一个函数contactListChanged。
<select formControlName="contactList" [compareWith]="compareResource" (change)="contactListChanged($event)">
<option v
浏览 35提问于2019-07-24得票数 1
回答已采纳
我尝试了这么多的解决方案，其中没有一个不起作用。请帮我解决这个问题。我需要遍历JSON对象。下面是我尝试的和我的JSON代码。我可以在tr标记中打印区段名称，但不能在tr标记中打印学校对象名称。
service.ts
getSections(): Observable<Section> {
return this.http
.get<Section>(this.apiUrl + 'sections/all')
.pipe(
retry(2),
catchError(this.handleEr
浏览 3提问于2021-03-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
