Question

我正在尝试将2个输入装饰器解析为另一个组件，但是只有其中一个可以工作。顺便说一下，它们都是从api服务返回数据的数组。

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

我有一个函数调用来按需要工作的客户获取订单，而我有一个函数按邮政编码获取订单。这两个函数都以可观察的订阅结果返回数据。

section-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());
    }

api

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

vs

this.salesDataByPostcode = result;

如何修复“输入发射器不向其他组件发送数据”

1 个答案: