Javascript 尝试使用*ngFor循环显示阵列

我使用lodash对数据数组进行分组，可以在控制台中看到输出，但我的

*ngFor

循环不会在html页面上显示数据。有人能指出我遗漏了什么吗

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

<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>

{{month.month}
{{customer.name}

所需的HTML格式（在表格中，但格式不受支持）：

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;
  }
}

• 四月
  • 约翰
  • 哈利
• 五月
  • 迪克
• 六月
  • 约翰

---

谢谢大家！：）

有一些错误，但你很接近

1） 您需要在组件中声明一个用于循环的公共属性。注意我是如何创建公共myData的

2） 然后需要使用要显示的数据初始化该对象。在原始代码中，您试图从

ngOnInit

执行

返回操作。那不是你想做的。您想将该数据分配给您的公共财产
myData

3） 您必须识别Angular
ngFor
不希望在默认情况下循环通过任何非数组的对象。幸运的是，从Angular版本6开始，他们就支持在对象上循环。但是，为了实现这一点，您需要包括新管道
| keyvalue

工作

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>


{{data.key}
{{客户}}
您没有在组件控制器中定义客户，正确的语法是
*ngFor=“让客户的客户”
。我猜想控制台中有一些错误。也许我遗漏了什么，但看起来ngOnInit（）之外只有名称和数据字段。所以我认为你不能用*ngFor迭代几个月或客户。我修复了ngFor循环，但如果“数据”等于你的“客户”，它仍然不会显示表格？从格式上看，你的名字在customer对象中，当循环时，它应该像let customer of customers。。。。{{customer.customer.name}日期，{{customer.transaction_date}好的，我在这里重新处理了我的问题，你能看一下吗？明亮的非常感谢你！看来我的主要问题是我从未申报过公共财产。我对Angular很陌生，所以我还有很多东西要学，再次感谢你！：D