Angular 如何计算每行的总计？

我有这个：

 <div class="first-row" *ngFor="let key of Object.keys(channels); let i=index">
          <h5> {{key}}</h5>
          <div class="second-row-inputs" *ngFor="let d of data;let i = index" [style.width.%]="width">
            <table-td [field]="d" [data]="data" (eventEmit)="eventEmit()"></table-td>
          </div>
</div>

我的td组件总数：

<input class='input' type="text" [(ngModel)]="total">

在我的表td组件中，我有：

@ViewChild('total') public total: TotalComponent;

但当我这么做的时候：

this.total.calculate();

我变得不确定了。有什么建议我怎么计算总数

data: [{ code: 'JAN', displayName: 'January', value: 0 }, { code: 'FEB', displayName: 'February', value: 0 }, { code: 'MAR', displayName: 'March', value: 0 }, { code: 'total', displayName: 'Total', value: 0 }] 

问题是导致视图未定义的ngIf。可以使用ViewChildren而不是ViewChildren

另一个技巧是使用[hidden]而不是*ngIf:

---

可以在console.logthis.data上显示输出；在calculate method？中，我无法从其父级访问calculate method（未定义）

this.total.calculate();

data: [{ code: 'JAN', displayName: 'January', value: 0 }, { code: 'FEB', displayName: 'February', value: 0 }, { code: 'MAR', displayName: 'March', value: 0 }, { code: 'total', displayName: 'Total', value: 0 }] 

@ViewChildren('total') public total: TotalComponent;

<total-td #total [hidden]="field.code=='total'" [data]="data"></total-td>