Question

我正在开发一个angular 4应用程序，需要将一个数组NpvResults从父组件传递给子组件。然后我需要访问子组件中的数组并在子客户端中显示该值。如下面的代码片段所示，我需要将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

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

<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

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

2 个答案: