Как добавить пустую строку в a для l oop на основе предыдущего для l oop? - PullRequest
Новая
       5

Как добавить пустую строку в a для l oop на основе предыдущего для l oop?

0 голосов
/ 18 февраля 2020

Я пытаюсь сделать сравнительный отчет, который отображает продажи за два периода времени, в этом сценарии я выбрал 1-31 октября и 1-30 ноября. Я загружаю данные из того же файла Json, но в качестве двух отдельных запросов первый использует октябрьский период, а второй - ноябрьский.

Это код, который у меня есть на данный момент: 

// October 1-31
<div class="col-6" *ngFor="let periods of reportData">
    <div *ngFor="let reportVal of periods.groupedTransactions">
        <div class="row" *ngIf="reportData.length > 0">
            <div class="col-12">
                <h6>Customer: {{reportVal.name}}</h6>
            </div>
            <div class="col">
                <h6>Total Sales: {{reportVal.totalSales | number}}</h6>
            </div>
        </div>
    </div>
</div>
// November 1-30
<div class="col-6" *ngFor="let comPeriods of comReportData">
    <div *ngFor="let reportVal of comPeriods.groupedTransactions">
        <div class="row" *ngIf="comReportData.length > 0">
            <div class="col-12">
                <h6>Customer: {{reportVal.name}}</h6>
            </div>
            <div class="col">
                <h6>Total Sales: {{reportVal.totalSales | number}}</h6>
            </div>
        </div>
    </div>
</div>

И вот результат:

Есть ли способ добавить функцию, которая добавит пустая строка в ноябре, если нет продаж от этого клиента? Я хочу, чтобы все клиенты были выровнены по вертикали.

Поскольку периоды для l oop основаны на выбранных датах, размещение столбцов в одном и том же l oop приведет к получению данных только с одной даты.

Если кто-нибудь может мне помочь или подсказать, где можно решить эту проблему, это будет с благодарностью!

Ответы [ 3 ]

0 голосов
/ 18 февраля 2020

Надеюсь, это поможет ... Если это не тот ожидаемый результат, который вы хотите отобразить, поделитесь форматом json.

customer.component. html

<div class="container">
<h2>Customer Sales</h2>
<p>The below table is listing monthly sales of the customer in the year 2019 </p>  
<div *ngFor="let report of reportData">
    <h5>Month: {{report.month}}</h5>
    <table class="table">
        <thead>
            <tr>
                <th>Customer</th>
                <th>Total Sales</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let sales of report.groupedTransactions">
                <td>{{sales.name}}</td>
                <td>{{sales.totalSales}}</td>
            </tr>
        </tbody>
    </table> 
</div>

customer.component.ts 

ngOnInit() {


this.reportData = [
  {
    month: 'October',
    groupedTransactions: [
      {
        name: 'John',
        totalSales: 100
      },
      {
        name: 'Rita',
        totalSales: 80
      },
      {
        name: 'Edward',
        totalSales: 70
      },
    ]
  },
  {
    month: 'November',
    groupedTransactions: [
      {
        name: 'John',
        totalSales: 90
      },
      {
        name: 'Rita',
        totalSales: null
      },
      {
        name: 'Edward',
        totalSales: 120
      },
    ]
  }
]

}

}}

0 голосов
/ 18 февраля 2020

Одним из решений будет выравнивание двух периодов. Например, добавление записи с именем пропавшего клиента и общим объемом продаж 0. Я не знаю, как нравится ваш json, но, возможно, вам следует также предположить, что порядок клиентов может отличаться для разных периоды. Сортировка обоих по имени может быть решением.

Вы можете придумать что-то вроде этого для выравнивания обоих периодов: 

interface CustomerReport {
  name: string;
  totalSales: number;
}

alignPeriods(firstPeriod: CustomerReport[], secondPeriod: CustomerReport[]) {
    const alignedFirstPeriod: CustomerReport[] = Object.assign([], firstPeriod);
    const alignedSecondPeriod: CustomerReport[] = [];

    firstPeriod.forEach(customer => {
      const secondCustomer = secondPeriod.find(secCustomer => secCustomer.name === customer.name);
      if (!secondCustomer) {
        alignedSecondPeriod.push({name: customer.name, totalSales: 0});
      } else {
        alignedSecondPeriod.push(secondCustomer);
      }
    });

    secondPeriod.forEach(customer => {
      const firstCustomer = firstPeriod.find(fstCustomer => fstCustomer.name === customer.name);
      if (!firstCustomer) {
        alignedFirstPeriod.push({name: customer.name, totalSales: 0});
        alignedSecondPeriod.push(customer);
      }
    });

    const alignedCustomers = [alignedFirstPeriod, alignedSecondPeriod];
    return alignedCustomers;
  }

Эта функция гарантирует, что оба массива находятся в одном порядке, и добавляет новая запись с totalSales: 0 для всех клиентов, которых нет в другой период. Это предполагает, что имена ваших клиентов являются уникальными идентификаторами.

Теперь вы можете l oop по обоим выровненным массивам в вашем шаблоне.

Это будет работать, но это не чистое решение, вам следует подумать об изменении вашей модели данных, как упоминал Курт Гамильтон его ответ.

0 голосов
/ 18 февраля 2020

Независимо от вашего подхода, ваш основной l oop должен превышать набор клиентов во всех периодах.

Я бы создал ненормализованную модель представления, которая объединяет клиентов и отчеты. Структура вашего окончательного вида модели, вероятно, будет выглядеть примерно так: 

periods: [
  {
    name: 'October 2019'
    customers: [
      {
        name: 'John',
        totalSales: 100
      },
      ...
    ]
  }
]

Сложность в том, как вы ее построите. Что-то вроде 

periods.forEach(period => {
  const periodViewModel = {};
  this.viewModel.periods.push(periodViewModel);

  customers.forEach(customer => {
    const customerViewModel = {
      name: customer.name,
      totalSales: this.getSales(customer, period)
    };

    periodViewModel.customers.push(customerViewModel);
  });
});

Где this.getSales(customer, period) - это какой-то способ получения данных о продажах для определенного клиента и периода - возможно, локальной переменной. Возможно, вы захотите оптимизировать свои данные о продажах для поиска по клиенту / периоду, в зависимости от того, сколько у вас периодов / клиентов.

И тогда привязка этой модели представления к вашей HTML становится довольно тривиальной. Пусть ваш машинопись позаботится о сложной модели и сделает ваш интерфейс простым.

...