Попытка отобразить массив с помощью цикла * ngFor

Question

Я сгруппировал массив данных с помощью loda sh и вижу вывод в моей консоли, но мои циклы *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>

Желаемый HTML Формат (в таблице, но форматирование не поддерживается):

• Апрель
  • Джон
  • Гарри
• Май
  • Дик
• Июнь
  • Джон

Спасибо, ребята! :)

Answer 1

Есть несколько ошибок, но вы близки.

1) Вам необходимо объявить свойство publi c в вашем компоненте, которое будет использоваться для l oop through. Обратите внимание, как я создал public myData.

2) Затем вам нужно инициализировать этот объект с данными, которые вы хотите отобразить. В исходном коде вы пытались сделать return из ngOnInit. Это не то, что вы хотите сделать. Вы хотите присвоить эти данные свойству publi c myData

3) Вы должны признать, что Angular ngFor не хочет l oop через что-либо, что не является массив по умолчанию . К счастью для вас, начиная с Angular версии 6, они поддерживали l oop над объектами. Однако, чтобы выполнить sh, вам необходимо включить новую трубу | keyvalue.

Работающий Демонстрация 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

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