Блог

Html-файл:

    // First Table has array data --> name,netCash,phonePay2,card,cellPay2,total2 
   <table class="table table-hover table-bordered table-striped table-sm">
    <thead class="table-primary">
        <tr>
            <th class="th-sm">Collection</th>
            <th class="th-sm" *ngFor="let data of recObj">{{data?.name }}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="th-sm">Cash</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.netCash | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Fone Pay</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.phonePay2 | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Card</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.card | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Cell Pay</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.cellPay2 | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Total</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.total2 | number : '.2-2'}}</td>
        </tr>
    </tbody>
</table>

// Second Table has array data --> trnUser,cashSales,fonePay,cardSales,cellPay,netSales 
<table class="table table-hover table-bordered table-striped table-sm">
    <thead class="table-primary">
        <tr>
            <th class="th-sm">Collection</th>
            <th class="th-sm" *ngFor="let data of recObj">{{data?.trnUser }}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="th-sm">Cash</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.cashSales | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Fone Pay</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.fonePay | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Card</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.cardSales | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Cell Pay</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.cellPay | number : '.2-2'}}</td>
        </tr>
        <tr>
            <th class="th-sm">Total</th>
            <td class="th-sm" *ngFor="let data of recObj">
                {{data?.netSales | number : '.2-2'}}</td>
        </tr>
    </tbody>
</table>
  

Ts-файл:

 getSalesData() {
console.log(this.cnvForm.value);
this.salesService.getSalesCollectionVariance(this.cnvForm.value).subscribe(data => {
  this.recObj = data;   // array data is in recObj ie. Users, TrnMode, Net amount
  console.log(this.recObj);
  this.users =this.recObj.map(function(item)  // array of Users
  {
    console.log(this.users);
    return item.user
  });
  let trnmodes =this.recObj.map(function(item)   // array of TrnMode
  {
    console.log(trnmodes);
    return item.trnmode
  });

  let netamounts =this.recObj.map(function(item)  // array of Net amount
  {
    console.log(netamounts);
    return item.netamnt
  });
});    
  

}

Массив данных:

 (2) [{…}, {…}]
  0:
    card: "1631.00"
    cardSales: "1631.00"
    cashSales: "41097.00"
    cellPay: ""
    cellPay2: ""
    div: "BAN"
    division: "BAN"
    fonePay: "0.00"
    name: "prabina"
    netCash: "41097.00"
    netSales: "42728.000000000000"
    phonePay2: "0.00"
    postDateTime: "03/12/20 12:00:00 AM"
    total2: "42728.000000000000"
    trnDate: "03/12/20 12:00:00 AM"
    trnUser: "prabina"
  1: {trnDate: "03/12/20 12:00:00 AM", division: "BAN", trnUser: "prakash", netSales: "80439.200000000000", cashSales: "65376.01", …}
  

Массив данных:
[![Данные консоли Я получаю эти данные в консоли в angular. Это те же данные, что и данные массива выше -> Данные Sql server][1]] [1]

Это данные массива, которые я хочу отобразить уникальным именем с их соответствующими денежными средствами, кредитной картой, QR-кодом на странице Html

Просмотр Html [Скриншот] [! [введите описание изображения здесь][3]][3]

Я так старался решить эту проблему, но не смог.. Помогите мне решить эту проблему..
Просто хочу отобразить данные в их положении, как показано в представлении Html [Скриншот].Спасибо за помощь…

Вы можете использовать директиву ngFor для перебора вашего массива данных (https://angular.io/api/common/NgForOf ).

Возможный подход может выглядеть следующим образом: https://stackblitz.com/edit/angular-nhtmsz?file=src/app/app.component.html

Редактировать

Я пересмотрел Stackblitz, чтобы включить возможный подход к накоплению данных.