 |
<div class="container" >
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<table id="orderstable" class="table table-striped table-hover " >
<thead class="bg-warning">
<tr>
<th scope="col">ship Country</th>
<th scope="col">ship City</th>
<th scope="col">customerID</th>
<th scope="col">orderID</th>
<th scope="col">product Name</th>
<th scope="col">unit Price</th>
<th scope="col">quantity</th>
<th scope="col">Grosstotal</th>
<th scope="col">discount</th>
<th scope="col">Nettotal</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let order of orders">
<td>{{order.shipCountry}}</td>
<td>{{order.shipCity}}</td>
<td>{{order.customerID}}</td>
<td>{{order.orderID}}</td>
<td>{{order.productName}}</td>
<td>{{order.unitPrice | currency:'₺'}}</td>
<td>{{order.quantity}}</td>
<td>{{Fn_grossTotal(order.quantity,order.unitPrice) | currency:'₺' }}</td>
<td>{{order.discount | currency:'₺'}}</td>
<td>{{Fn_netTotal(order.quantity,order.unitPrice,order.discount) | currency:'₺'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
** component
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { VorderDetails } from './vorder-details';
import { CurrencyPipe } from '@angular/common';
// import { plainToClass } from "class-transformer";
const _vodt = new VorderDetails() ;
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.css']
})
export class OrdersComponent implements OnInit {
Fn_grossTotal(uPrice: number, qtity: number ): number {
return (uPrice * qtity ) ;
}
Fn_netTotal(uPrice: number, qtity: number , dcount: number ): number{
return (uPrice * qtity ) - dcount ;
}
orders: any ;
url = 'https://localhost:44319/api/Order/GetOrderAndDetails';
constructor(private httpClient: HttpClient) {
}
ngOnInit(): void {
// api route => WebApiCore-MongoDB project
this.httpClient.get<VorderDetails>(this.url).subscribe(data => {
console.log(data );
this.orders = data;
});
}
}
Yorumlar
Yorum Gönder