时间戳

首页 > 解决方案 > 从角度 7 的数组中减去三行

angular - 从角度 7 的数组中减去三行

问题描述

我想减去表格的前 3 行

TVA Collectée -TVA Deductible-Tva deductible/immo

如果它们之间的差异是正的，我想把计算结果放在盒子里TVA à Payer，如果是负的放在盒子里Crédit de tva

这是我的html代码：



  <div class="table-responsive">
    <table class="styled-table" border="1" cellpadding="1" cellspacing="1">
      <thead>
        <tr height="50">
          <th align="center" width="150">&nbsp;</th>
          <td align="center" width="150" *ngFor="let item of listdate">{{item}}</td>
        </tr>
      </thead>

      <tbody>
        <tr>

          <th>TVA Collectée</th>
          <ng-container *ngFor="let item of date">
            <td>
              <ng-container *ngFor="let c of listTvaVente">
                <label *ngIf="item === c.date">{{c.tvaCollectee | number : '0.3-3'}}</label>
              </ng-container>
            </td>
          </ng-container>

        </tr>
        <tr>
          <th>TVA Déductible</th>
          <ng-container *ngFor="let item of date">
            <td>
              <ng-container *ngFor="let c  of listTvaAchat ">
                <label *ngIf="item === c.date ">{{c.tvaDeductible| number : '0.3-3'}}</label>
              </ng-container>
            </td>
          </ng-container>
        </tr>

        <tr>
          <th>TVA Déductible/immo</th>
          <ng-container *ngFor="let item of date">
            <td>
              <ng-container *ngFor="let c  of listTvaInv ">
                <label *ngIf="item=== c.date ">{{c.tvaDeductible| number : '0.3-3'}}</label>
              </ng-container>
            </td>
          </ng-container>
        </tr>
        <tr>
          <th>TVA à Reporter</th>
        </tr>
        <tr>
          <th>TVA à Payer</th>
        </tr>
        <tr>
          <th>Crédit de TVA</th>
        </tr>

      </tbody>

    </table>
  </div>

这是我的 .ts 代码：

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  listdate = ['Janvier-2021', 'Février-2021', 'Mars-2021'];
  date = ['2020-01', '2020-02', '2020-03'];

  listTvaVente = [
    {
      date: '2020-01',
      year: 2020,
      month: 'JANUARY',
      chiffreAffaireHT: 0.0,
      tvaCollectee: 36000.0
    },
    {
      date: '2020-02',
      year: 2020,
      month: 'FEBRUARY',
      chiffreAffaireHT: 0.0,
      tvaCollectee: 35455.0
    },
    {
      date: '2020-03',
      year: 2020,
      month: 'MARCH',
      chiffreAffaireHT: 0.0,
      tvaCollectee: 45000.0
    }
  ];

  listTvaAchat = [
    {
      date: '2020-01',
      year: 2020,
      month: 'JANUARY',
      chiffreAffaireHT: 0.0,
      tvaDeductible: 26000.0
    },
    {
      date: '2020-02',
      year: 2020,
      month: 'FEBRUARY',
      chiffreAffaireHT: 0.0,
      tvaDeductible: 26000.0
    },
    {
      date: '2020-03',
      year: 2020,
      month: 'MARCH',
      chiffreAffaireHT: 0.0,
      tvaDeductible: 32000.0
    }
  ];
  listTvaInv = [
    {
      date: '2020-01',
      year: 2020,
      month: 'JANUARY',
      tvaDeductible: 12000.0
    },
    {
      date: '2020-02',
      year: 2020,
      month: 'FEBRUARY',
      tvaDeductible: 11500.0
    },
    {
      date: '2020-03',
      year: 2020,
      month: 'MARCH',
      tvaDeductible: 13000.0
    }
  ];

  constructor() {}

  ngOnInit() {}
}

这是我想做的一个例子

在此处输入图像描述

提前致谢。

标签： angulartypescript

解决方案

这是您需要添加到代码中以获得所需内容的内容：

Typescript:

    listApayer = [
    {
      date: '2020-01',
      year: 2020,
      month: 'JANUARY',
      tvaPayer: 0
    },
    {
      date: '2020-02',
      year: 2020,
      month: 'FEBRUARY',
      tvaPayer: 0
    },
    {
      date: '2020-03',
      year: 2020,
      month: 'MARCH',
      tvaPayer: 0
    }
  ];

  creditTva = [
    {
      date: '2020-01',
      year: 2020,
      month: 'JANUARY',
      tvaCredit: 0
    },
    {
      date: '2020-02',
      year: 2020,
      month: 'FEBRUARY',
      tvaCredit: 0
    },
    {
      date: '2020-03',
      year: 2020,
      month: 'MARCH',
      tvaCredit: 0
    }
  ];

  constructor() {}

  ngOnInit() {
    const length = this.listdate.length;
    for (let i = 0; i < length; i++) {
      const subValue =
        this.listTvaVente[i].tvaCollectee -
        this.listTvaAchat[i].tvaDeductible -
        this.listTvaInv[i].tvaDeductible;

      if (subValue >= 0) {
        this.listApayer[i].tvaPayer = subValue;
      } else {
        this.creditTva[i].tvaCredit = subValue * -1;
      }
    }
  }

对于 .HTML：

     <tr>
    <th>TVA à Payer</th>
    <ng-container *ngFor="let item of date">
      <td>
        <ng-container *ngFor="let c  of listApayer ">
          <label *ngIf="item=== c.date ">{{c.tvaPayer| number : '0.3-3'}}</label>
        </ng-container>
      </td>
    </ng-container>
  </tr>
  <tr>
    <th>Crédit de TVA</th>
    <ng-container *ngFor="let item of date">
      <td>
        <ng-container *ngFor="let c  of creditTva ">
          <label *ngIf="item=== c.date ">{{c.tvaCredit| number : '0.3-3'}}</label>
        </ng-container>
      </td>
    </ng-container>
  </tr>

有关实时示例，请参阅此链接：https ://stackblitz.com/edit/angular7-playground-myfas7?file=src%2Fapp%2Fapp.component.html

推荐阅读