Как исправить ошибку «Источник ввода не отправляет данные другому компоненту»

Question

Я пытаюсь разобрать 2 входных декоратора в другой компонент, но работает только один из них. Кстати, оба массива возвращают данные из API-сервиса.

раздел-sales.component.html

  <div class="section-container">
  <div class="row-fluid cards">
  <div class="card-deck">
    <div class="card mb-3 shadow card-theme">
      <div class="card-header card-header-theme">
        <h5>Daily Orders</h5>
      </div>
      <div class="card-body">
        <app-bar-chart></app-bar-chart>
      </div>
    </div>
    <div class="card mb-3 shadow card-theme">
      <div class="card-header card-header-theme">
        <h5>Orders by Customer</h5>
      </div>
      <div class="card-body">
        <app-pie-chart *ngIf='salesDataByCustomer' [inputData]='salesDataByCustomer' [limit]='3'></app-pie-chart>
      </div>
    </div>
    <div class="card mb-3 shadow card-theme">
      <div class="card-header card-header-theme">
        <h5>Orders by Post Code</h5>
      </div>
      <div class="card-body">
        <app-pie-chart *ngIf='salesDataByPostCode' [inputData]='salesDataByPostCode' [limit]='5'></app-pie-chart>
      </div>
    </div>
  </div>
  </div>
  <div class="row-fluid cards">
  <div class="card shadow card-theme mt-4 card-bottom">
    <div class="card-header theme">
      <h5>Monthly Sales by Product</h5>
    </div>
      <div class="card-body">
        <app-line-chart></app-line-chart>
      </div>
  </div>
  </div> 
  </div>

У меня есть вызов функции для получения заказа клиентом, который работает, и у меня есть вызов, чтобы получить заказ по почтовому индексу. Обе функции возвращают данные в наблюдаемом результате подписки.

раздел-sales.component.ts

import { Component, OnInit } from '@angular/core';
import { OrderService } from 'src/shared/Service/order.service';

@Component({
  selector: 'app-section-sales',
  templateUrl: './section-sales.component.html',
  styleUrls: ['./section-sales.component.css']
})
export class SectionSalesComponent implements OnInit {

  salesDataByCustomer: any;
  salesDataByPostcode: any;

  constructor(private _orderService: OrderService) { }

  ngOnInit() {
    this.getOrderByCustomer();
    this.getOrderByPostCode();
  }

  getOrderByPostCode() {
    this._orderService.getOrdersByPostCode().subscribe(result => {
      this.salesDataByPostcode = result;
    });
  }

  getOrderByCustomer() {
    this._orderService.getOrdersByCustomer(5).subscribe(result => {
      this.salesDataByCustomer = result;
    });
  }
}

order.service.ts

    /// <summary>
    /// Get all orders by number of customers.
    /// </summary>
    /// <param name="n">The number of customers.</param>
    getOrdersByCustomer(n: number) {
      return this._http.get(`${ environment.apiURL }/api/order/bycustomer/${n}`)
        .map(res => res.json());
    }

    /// <summary>
    /// Get all orders by postcode.
    /// </summary>
    getOrdersByPostCode() {
      return this._http.get(`${environment.apiURL }/api/order/bypostcode/`)
        .map(res => res.json());
    }

апи

    /// <summary>
    /// Get all orders grouped by postcode.
    /// </summary>
    /// <returns>The orders.</returns>
    [HttpGet("ByPostcode")]
    public async Task<IActionResult> ByPostcode()
    {
        //Filter orders.
        var orders = await _context.Orders
            .Include(order => order.Customer)
            .ToListAsync();

        //Group by postcode. 
        //Descending list of postcodes and total number of orders for each of those postcodes.
        var groupedResult = orders.GroupBy(order => order.Customer.PostCode)
            .ToList()
            .Select(group => new
            {
                PostCode = group.Key,
                Total = group.Sum(x => x.Total)
            }).OrderByDescending(result => result.Total)
            .ToList();

        return Ok(groupedResult);
    }

    /// <summary>
    /// Get orders by number of customers.
    /// </summary>
    /// <param name="numberOfCustomers">The number of customers.</param>
    /// <returns>The orders.</returns>
    [HttpGet("ByCustomer/{numberOfCustomers}")]
    public async Task<IActionResult> GetOrderByCustomer(int numberOfCustomers)
    {
        //Filter orders.
        var orders = await _context.Orders
            .Include(order => order.Customer).ToListAsync();

        //Group by postcode. 
        //Descending list of postcodes and total number of orders for each of those postcodes.
        var groupedResult = orders.GroupBy(order => order.Customer.Id)
            .ToList()
            .Select(group => new
            {
                FirstName = _context.Customers.Find(group.Key).FirstName,
                Total = group.Sum(x => x.Total)
            }).OrderByDescending(result => result.Total)
            .Take(numberOfCustomers)
            .ToList();

        return Ok(groupedResult);
    }

Обе круговые диаграммы должны быть заполнены данными, но работает только клиент. Есть идеи, где я иду не так?

Answer 1

У вас есть опечатка на ваш взгляд:

Код в представлении использует другой регистр, чем в компоненте:

<app-pie-chart *ngIf='salesDataByPostCode' [inputData]='salesDataByPostCode' [limit]='5'></app-pie-chart>

против

this.salesDataByPostcode = result;