#angular #angular-material #angular9 #angular-arrays
#angular #angular-материал #angular9 #angular-массивы
Вопрос:
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 [Скриншот].Спасибо за помощь…
Комментарии:
1. Можете ли вы создать stackblitz для своего примера?
Ответ №1:
Вы можете использовать директиву ngFor для перебора вашего массива данных (https://angular.io/api/common/NgForOf ).
Возможный подход может выглядеть следующим образом: https://stackblitz.com/edit/angular-nhtmsz?file=src/app/app.component.html
Редактировать
Я пересмотрел Stackblitz, чтобы включить возможный подход к накоплению данных.
Комментарии:
1. Я использовал ngFor, но не получил требуемого вывода.. Пользователи отображаются дубликатами, у меня нет этого дублирующего пользователя
2. Если вы используете данные своего массива, как показано на скриншоте, и отображаете его так, как я описал в Stackblitz, дубликаты будут только в том случае, если в данных есть дубликаты.
3. Хорошо.. Тогда как я могу скрыть или отобразить только уникального пользователя в поле зрения? Разве мы не можем использовать код angular..
4. Вы поняли, что я хочу отобразить? Смотрите на скриншоте массива и скриншоте HTML.
5. Хорошо, я понял. Проблема в основном заключается в накоплении данных.