[英]Trying to display an array using a *ngFor loop
I grouped a data array using lodash and can see the output in my console, but my *ngFor
loops don't display the data on my html page.我使用 lodash 对数据数组进行了分组,并且可以在我的控制台中看到输出,但是我的
*ngFor
循环没有在我的 html 页面上显示数据。 Can anyone point out what I'm missing here?谁能指出我在这里缺少什么?
app.component.ts: app.component.ts:
export class AppComponent {
name = "Angular";
data = [
{
customer: {
name: "John"
},
transaction_date: "2017-04-18"
},
{
customer: {
name: "Dick"
},
transaction_date: "2017-06-30"
},
{
customer: {
name: "Harry"
},
transaction_date: "2017-04-03"
},
{
customer: {
name: "John"
},
transaction_date: "2017-05-03"
}
];
constructor() {}
ngOnInit() {
// Sort by Month
// Format month
const monthName = item =>
moment(item.transaction_date, "YYYY-MM-DD").format("MMM");
// Establish groupBy array
const byMonth = _.chain(this.data)
.groupBy(monthName)
.mapValues(items => _.map(items, "customer.name"))
.value();
console.log(byMonth);
return byMonth;
console.log(monthName);
// By Day
const dayName = item =>
moment(item.transaction_date, "YYYY-MM-DD").format("DD");
const byDay = _.chain(this.data)
.groupBy(dayName)
.mapValues(items => _.map(items, "customer.name"))
.value();
console.log(byDay);
return byDay;
}
}
app.component.html应用程序组件.html
<table *ngFor="let month of months">
<tr>
<th>{{month.month}}</th>
</tr>
<tr>
<td>
<table *ngFor="let customer of customers">
<tr>
<td>
{{customer.name}}
</td>
</tr>
</table>
</td>
</tr>
</table>
Desired HTML Format (in a table but the formatting wasn't supported):所需的 HTML 格式(在表格中,但不支持格式):
Thanks guys!谢谢你们! :)
:)
There are a few mistakes, but you're close.有一些错误,但你已经接近了。
1) You need to declare a public property in your component that will be used to loop through. 1) 您需要在组件中声明一个公共属性,用于循环遍历。 Notice how I created
public myData
.请注意我是如何创建
public myData
。
2) You then need to initialize that object with the data you want to display. 2) 然后您需要使用要显示的数据初始化该对象。 In your original code you were trying to do a
return
from the ngOnInit
.在您的原始代码中,您试图从
ngOnInit
return
。 That is not what you want to do.那不是你想要做的。 You want to assign that data to your public property
myData
您想将该数据分配给您的公共财产
myData
3) You have to recognize Angular ngFor
does not want to loop through anything that is not an array by default . 3) 你必须认识到 Angular
ngFor
不想遍历任何不是数组的东西。 Lucky for you since Angular version 6 they provided support to loop over objects.幸运的是,从 Angular 版本 6 开始,他们提供了对对象循环的支持。 However, in order to accomplish that you need to include the new pipe
| keyvalue
但是,为了实现这一点,您需要包含新管道
| keyvalue
| keyvalue
. | keyvalue
。
Working StackBlitz Demo工作StackBlitz 演示
export class AppComponent {
name = "Angular";
public myData = {};
data = [
{
customer: {
name: "John"
},
transaction_date: "2017-04-18"
},
{
customer: {
name: "Dick"
},
transaction_date: "2017-06-30"
},
{
customer: {
name: "Harry"
},
transaction_date: "2017-04-03"
},
{
customer: {
name: "John"
},
transaction_date: "2017-05-03"
}
];
constructor() {}
ngOnInit() {
// Sort by Month
// Format month
const monthName = item =>
moment(item.transaction_date, "YYYY-MM-DD").format("MMM");
// Establish groupBy array
this.myData = _.chain(this.data)
.groupBy(monthName)
.mapValues(items => _.map(items, "customer.name"))
.value();
console.log(this.myData);
}
}
HTML HTML
<table *ngFor="let data of myData | keyvalue">
<tr>
<th>{{data.key}}</th>
</tr>
<tr>
<td>
<table *ngFor="let customer of data.value">
<tr>
<td>
{{customer}}
</td>
</tr>
</table>
</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.