Angular 4：将数组元素从父级传递给子级并在子级html中显示值

Question

我正在开发一个 Angular 4 应用程序，需要将数组 NpvResults 从父组件传递到子组件。然后我需要访问子组件中的数组并在子组件的客户端中显示该值。如下面的代码 sn-p 所示，我需要将 this.npvResults 传递给子组件。如何将值从父级传递给子级以及如何将该值绑定到客户端。

NpvResults（数组）

NpvResult = new Models.NpvResults()
                {
                    CommInsPremiumPaid = trigger2Output.NpvResults.CommIns.Where(x => x.layerId == 0).Sum(x=> x.premPaid),
                    CommInsTaxDeduction = trigger2Output.NpvResults.CommIns.Where(x => x.layerId == 0).Sum(x => x.taxDeduction),
                    CommInsNetCost = trigger2Output.NpvResults.NetCost.Where(x => x.layerId == 0).Sum(x => x.commInsNetCost),
                    SelfInsDiscountedTaxDeduction = trigger2Output.NpvResults.SelfIns.Where(x => x.layerId == 0).Sum(x => x.discountedTaxDeduction),
                    SelfInsDiscountedLossesPaid = trigger2Output.NpvResults.SelfIns.Where(x => x.layerId == 0).Sum(x => x.discountedLossesPaid),
                    SelfInsNetCost = trigger2Output.NpvResults.NetCost.Where(x => x.layerId == 0).Sum(x => x.selfInsNetCost),
                    CaptiveInsPremiumPaid = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.premPaid),
                    CaptiveInsTaxDeduction = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedTaxDeduction),
                    CaptiveInsLoanToParent = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedLoanToParent),
                    CaptiveInsCapitalContribution = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedCapContriDistr),
                    CaptiveDividentDistribution = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedDividendDistr),
                    CaptiveInsTerminalValue = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedTerminalVal),
                    CaptiveInsNetCost = trigger2Output.NpvResults.NetCost.Where(x => x.layerId == 0).Sum(x => x.captiveInsNetCost)

                }

父组件

import { Component, OnInit } from '@angular/core';
import { RunService  } from '@wtw/platform/services';
import { Base } from '@wtw/toolkit';
import * as BackendDto from '../../../api/dtos';
import * as BackendProxy from '../../../api/proxies';


@Component({
  selector: 'app-results',
  templateUrl: './results.component.html'
})
export class ResultsComponent extends  Base.ReactiveComponent implements OnInit {
 run: BackendDto.CaptivesRun;
 npvResults : BackendDto.NpvResults;


  constructor(
    private _runService: RunService,

  ) {
    super();
  }

  ngOnInit() {
    this._subscriptions = [this._runService.activeRun.subscribe(r => {
    this.run = r.data;

       this.npvResults = this.run.strategies[0].results.npvResult;

      if (this.run.strategies) {
        if (!this.run.strategies[0].results) {
      // TODO: push this down to the strategy container and ensure params are set for the strategy id
           this._runService.executeTrigger(r.runId, r.data, {number: 2, param: ''}, r.currencyInfo).uiSignal('trigger 2').subscribe( x => this.run = x.data);
        }
      }
    })];

  }

}

子组件

import { Component, OnInit ,Input} from '@angular/core';
import { NpvResults } from '../../../../api/dtos';
import { BoxPlotChartComponent } from "../../../../shared/HighCharts/box-plot-chart/box-plot-chart.component";


@Component({
  selector: 'app-net-present-value-analysis',
  templateUrl: './net-present-value-analysis.component.html',
})
export class NetPresentValueAnalysisComponent implements OnInit {

  isExpanded = false;
  showTable = true;
  @Input() NpvResults: NpvResults[];

  constructor() { }



  ngOnInit() {

  }

ChildComponentUi

<div class="tb-row d-flex flex-row">
    <div class="tb-cell col-md-7 col-sm-6 col-6">Premium Paid</div>
    <div class="tb-cell col-sm-6 col-md-5 col-6">-142,927</div>
</div> 
 <div class="tb-row d-flex flex-row">
    <div class="tb-cell col-md-7 col-sm-6 col-6">Tax Deduction</div>
     <div class="tb-cell col-sm-6 col-md-5 col-6">57,171</div>
 </div>
  <div class="tb-row d-flex flex-row">
      <div class="tb-cell col-md-7 col-sm-6 col-6">Loan to Parent</div>
       <div class="tb-cell col-sm-6 col-md-5 col-6">0</div>
  </div> 
  <div class="tb-row d-flex flex-row"><div class="tb-cell col-md-7 col-sm-6 col-6">Capital Contribution/Distribution</div>
   <div class="tb-cell col-sm-6 col-md-5 col-6">-2500</div>
  </div>

Answer 1

在父组件的模板（您没有在上面显示）中，您可以将子组件的输入属性绑定到您要传递给它的数据。所以是这样的：

<app-net-present-value-analysis [NpvResults] = npvResults>
</app-net-present-value-analysis>

我在这里有一篇带有图表的博文：https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/

Answer 2

在 parent.component.html 中，您可以将其与属性绑定绑定，如下所示： <app-net-present-value-analysis [npvResults]="npvResults"></app-net-present-value-analysis>

现在您可以使用 @Input 装饰器在类似组件中访问它，如下所示： @Input() npvResults: NpvResults[];

在child component.html 中，您可以在ngFor 中使用它来循环npvResults 数组，例如：

<div *ngFor="let result of npvResults">
  {{result.propertyName}}
</div>

更多组件交互请参考本指南：https://angular.io/guide/component-interaction