Я видел, как многие пользователи не понимают, как разные страны используют разные форматы для отображения числового формата в соответствии с кодом страны. Большинство стран используют «точечную нотацию» в качестве разделителя, а многие из них используют «запятую» в качестве разделителя. В этой статье вы узнаете, как использовать формат локализованных чисел на основе кода страны и символа для отображения с помощью tolocalestring()
метода JavaScript , который возвращает строку.
Чтобы объяснить концепцию локализации и числового формата на основе их локали, я использую мою предыдущую статью в качестве справочного материала для отображения цены, основанной на разных странах и их валютах.
Итак, ознакомьтесь с моей предыдущей статьей Как создать вложенную сетку с помощью Angular 8 . Для справки я выбираю цену и показываю ее с символом валюты на основе их страны и кода валюты. Кроме того, во вложенной сетке я отображаю все цены с символом валюты.
В этой статье я просто пытаюсь объяснить концепцию tolocalestring()
, которую я собираюсь применить к ценам, на которые мы смотрим. В моей предыдущей статье я только что отображал цену в формате «en», который является просто десятичным числом, но что, если мы хотим увидеть цену в соответствии с соответствующей страной?
Вам также может понравиться:
Angular 8: Все, что вам нужно знать .
Backend
Чтобы получить все страны, вам просто нужно добавить следующий код в SQL Server:
SQL
1
USE [Product]
2
GO
3
4
SET ANSI_NULLS ON
5
GO
6
7
SET QUOTED_IDENTIFIER ON
8
GO
9
10
CREATE TABLE [dbo].[Country](
11
[CountryId] [int] NOT NULL,
12
[CountryName] [nvarchar](50) NULL,
13
[CountryCode] [nvarchar](50) NULL,
14
[CurrencySymbol] [nvarchar](50) NULL,
15
CONSTRAINT [PK_Country] PRIMARY KEY CLUSTERED
16
(
17
[CountryId] ASC
18
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
19
) ON [PRIMARY]
20
GO
После создания таблицы самое время вставить записи в таблицу стран. Для этого я вставил код, поэтому просто скопируйте и вставьте в SQL Server.
SQL
xxxxxxxxxx
1
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (1, N'India', N'en-IN', N'INR')
2
GO
3
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (2, N'Sweden', N'sv-SE', N'SEK')
4
GO
5
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (3, N'England', N'en-GB', N'GBP')
6
GO
7
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (4, N'Ireland', N'en-IE', N'EUR')
8
GO
9
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (5, N'China', N'zh-CN', N'CNY')
10
GO
11
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (6, N'Japan', N'ja-JP', N'JPY')
12
GO
13
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (7, N'USA', N'en-US', N'USD')
14
GO
15
INSERT [dbo].[Country] ([CountryId], [CountryName], [CountryCode], [CurrencySymbol]) VALUES (8, N'Kuwait', N'ar-KW', N'KWD')
16
GO
В моей предыдущей статье я, к сожалению, забыл предоставить записи базы данных для таблицы продуктов, поэтому я делюсь этим с вами.
SQL
xxxxxxxxxx
1
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (1, 1, N'100', N'OppoProvider', N'1Yu', N'Oppo')
2
GO
3
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (2, 2, N'101', N'VivoProvider', N'2Yu', N'Vivo')
4
GO
5
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (3, 3, N'102', N'SamsungProvider', N'3Yu', N'Samsung')
6
GO
7
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (4, 4, N'103', N'NokiaProvider', N'4Yu', N'Nokia')
8
GO
9
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (5, 5, N'104', N'SonyProvider', N'5Yu', N'Sony')
10
GO
11
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (6, 6, N'105', N'HuaweiProvider', N'6Yu', N'Huawei')
12
GO
13
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (7, 7, N'106', N'MotorolaProvider', N'7Yu', N'Motorola')
14
GO
15
INSERT [dbo].[Product] ([ProductId], [ProductCountryInformationId], [ArtNo], [Provider], [ProviderArtNo], [Brand]) VALUES (8, 8, N'107', N'HTCProvider', N'8Yu', N'HTC')
16
GO
Для информации о стране продукта, которая является нашей вложенной сеткой, ниже приведен запрос на вставку, который я, к сожалению, забыл поделиться им в моей последней статье.
SQL
xxxxxxxxxx
1
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (1, CAST(4010.23 AS Decimal(18, 2)), N'123', N'321', N'India', 1)
2
GO
3
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (2, CAST(5623.32 AS Decimal(18, 2)), N'352', N'652', N'Sweden', 1)
4
GO
5
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (3, CAST(6231.56 AS Decimal(18, 2)), N'557', N'889', N'England', 1)
6
GO
7
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (4, CAST(9685.23 AS Decimal(18, 2)), N'665', N'652', N'Ireland', 1)
8
GO
9
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (5, CAST(1253.01 AS Decimal(18, 2)), N'32', N'62', N'China', 1)
10
GO
11
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (6, CAST(6325.89 AS Decimal(18, 2)), N'21', N'23', N'Japan', 1)
12
GO
13
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (7, CAST(5212.56 AS Decimal(18, 2)), N'233', N'214', N'USA', 1)
14
GO
15
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (8, CAST(4151.66 AS Decimal(18, 2)), N'452', N'452', N'Kuwait', 1)
16
GO
17
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (9, CAST(1000.00 AS Decimal(18, 2)), N'5', N'6', N'India', 2)
18
GO
19
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (10, CAST(2000.00 AS Decimal(18, 2)), N'4', N'5', N'Sweden', 2)
20
GO
21
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (11, CAST(3000.00 AS Decimal(18, 2)), N'5', N'5', N'England', 2)
22
GO
23
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (12, CAST(4000.00 AS Decimal(18, 2)), N'7', N'8', N'Ireland', 2)
24
GO
25
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (13, CAST(5000.00 AS Decimal(18, 2)), N'8', N'8', N'China', 2)
26
GO
27
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (14, CAST(6000.00 AS Decimal(18, 2)), N'8', N'9', N'Japan', 2)
28
GO
29
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (15, CAST(7000.00 AS Decimal(18, 2)), N'8', N'7', N'USA', 2)
30
GO
31
INSERT [dbo].[ProductCountryInformation] ([ProductCountryInformationId], [Price], [BuyAccount], [SalesAccount], [CountryName], [ProductId]) VALUES (16, CAST(8000.00 AS Decimal(18, 2)), N'5', N'4', N'Kuwait', 2)
32
GO
Веб-API
Скопируйте и вставьте следующий код в свой контроллер. Этот код выберет все страны, которые находятся в Countries
таблице вашей базы данных .
C #
xxxxxxxxxx
1
[HttpGet]
2
[Route("getAllCountry")]
3
public object getAllCountry()
4
{
5
return DB.Countries.ToList();
6
}
Если у вас нет полного кода, я поделюсь им с вами ниже.
Полный код для контроллера страны :
C #
xxxxxxxxxx
1
using System.Linq;
2
using System.Web.Http;
3
using CompanyDetails.Models;
4
namespace CompanyDetails.Controllers
5
{
6
[RoutePrefix("api/Company")]
7
public class CompanyController : ApiController
8
{
9
CompanyEntities2 DB = new CompanyEntities2();
10
11
[HttpGet]
12
[Route("getAllCountry")]
13
public object getAllCountry()
14
{
15
return DB.Countries.ToList();
16
}
17
18
[HttpGet]
19
[Route("getAllProducts")]
20
public object getAllProducts(string countrycode)
21
{
22
var productDetails = DB.USP_GetAllProducts().ToList();
23
return productDetails;
24
}
25
26
[HttpGet]
27
[Route("getProductCountryInformation")]
28
public object getProductCountryInformation(int ProductId)
29
{
30
var prod = DB.USP_getCountryInfo(ProductId).ToList();
31
return prod;
32
}
33
}
34
}
Внешний интерфейс
Следующий код извлечет все страны и свяжет его с нашим выпадающим списком.
JavaScript
xxxxxxxxxx
1
public getCountry(){
2
this._productService.getAllCountry().subscribe((data: any) => {
3
this.country =data;
4
console.log(data);
5
});
6
}
Этот HTML-код добавляет один выпадающий список, который связывает все страны, которые мы получаем из страны таблицы базы данных. Здесь, один метод, который я объявил, — onCountryChange
это срабатывание, когда мы меняем раскрывающийся список.
Скопируйте следующий код и вставьте его в product.component.html файл внутри DIV , который имеет класс, col-12 col-md-12
.
HTML
xxxxxxxxxx
1
<select style="width: 160px;margin: 10px;" [(ngModel)]="countryId" (ngModelChange)="onCountryChange($event)"
2
class="form-control" id="ddlCountry" name="ddlCountry" placeholder="Select a Country">
3
<option [ngValue]="0" selected>--Choose Country--
4
</option>
5
<option [ngValue]="countryList.CountryId" *ngFor="let countryList of country">{{countryList.CountryName}}
6
</option>
7
</select>
Скопируйте следующий код и вставьте его или замените его ngOnInIt()
, чтобы получить все страны и связать их с нашим раскрывающимся списком.
JavaScript
xxxxxxxxxx
1
this.getCountry();
2
this.countryId=0;
3
this.getProducts(this.countryId);
4
Скопируйте следующий код и вставьте его в наш сервис, чтобы получить все страны.
JavaScript
xxxxxxxxxx
1
getAllCountry(){
2
this.url = 'http://localhost:49661/api/Company/getAllCountry';
3
return this.http.get<any[]>(this.url);
4
}
Затем скопируйте этот код и вставьте его в getProducts
метод, который преобразует цену в зависимости от страны и отобразит ее в нашем браузере.
JavaScript
xxxxxxxxxx
1
for(var a =0;a<res.length;a++){
2
res[a].Price =res[a].Price.toLocaleString(this.country[a].CountryCode, { style: 'currency', currency: this.country[a].CurrencySymbol });
3
}
Затем вставьте следующий код в showProductCountryInfo
метод.
JavaScript
xxxxxxxxxx
1
for (let i = 0; i < data.length; i++) {
2
//Price Format based on country
3
this.priceToDisplay[i] = data[i].Price;
4
}
Этот метод используется, чтобы проверить, выбрана ли какая-либо страна или нет; если страна не выбрана, тогда цена будет отображаться нормально без каких-либо символов валюты и формата валюты. С другой стороны, если выбрана страна, цена будет отображаться в соответствии с кодом страны и символом валюты.
JavaScript
1
toLocaleString(this.countryCode, { style: 'currency', currency: this.currencySymbol });
tolacalestring()
это встроенный метод JavaScript для преобразования числа в строку, который имеет некоторые перегруженные функции, включая код страны и код валюты (внутри фигурных скобок в стиле), которые мы выбираем из Countries
таблицы.
Этот конкретный код является методом для изменения страны. Если $ event равен 0, страна не выбрана, и цена будет отображаться нормально. Но, если код страны присутствует, он будет отображать номер в соответствии со списком кодов валют их страны.
JavaScript
xxxxxxxxxx
1
onCountryChange($event) {
2
debugger;
3
this.countryId = $event;
4
if($event==0){
5
for(var a =0;a<this.products.length;a++){
6
this.priceToDisplay[a] =this.products[a].Price;
7
}
8
}else{
9
this.countryCode =this.country[$event-1].CountryCode;
10
this.currencySymbol =this.country[$event-1].CurrencySymbol;
11
for(var a =0;a<this.products.length;a++){
12
this.priceToDisplay[a] =this.products[a].Price.toLocaleString(this.countryCode, { style: 'currency', currency: this.currencySymbol });
13
}
14
}
15
}
Чтобы избежать путаницы, я делюсь полным кодом, поэтому просто замените его на старый код, если он у вас уже есть в моей предыдущей статье.
products.components.ts
JavaScript
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
import { ProductsService } from './products.service';
3
4
@Component({
5
selector: 'app-products',
6
templateUrl: './products.component.html',
7
styleUrls: ['./products.component.css']
8
})
9
export class ProductsComponent implements OnInit {
10
11
products = [];
12
countryCode: any;
13
currencySymbol:any;
14
productCountryInformation: any = [];
15
hideme = [];
16
Index: any;
17
countryId: any;
18
country: any;
19
priceToDisplay=[];
20
21
constructor(private _productService: ProductsService) {
22
}
23
ngOnInit() {
24
this.getCountry();
25
this.countryId=0;
26
this.getProducts(this.countryId);
27
}
28
29
public getCountry(){
30
this._productService.getAllCountry().subscribe((data: any) => {
31
this.country =data;
32
console.log(data);
33
});
34
}
35
36
public getProducts(countryId) {
37
let data = [];
38
this._productService.getAllProducts(countryId).subscribe((data: any) => {
39
40
for (let i = 0; i < data.length; i++) {
41
//Price Format based on country
42
this.priceToDisplay[i] = data[i].Price;
43
}
44
this.products =data;
45
})
46
47
}
48
public showProductCountryInfo(index,productId) {
49
this._productService.countryInfo(productId).subscribe((res:any)=>{
50
51
for(var a =0;a<res.length;a++){
52
res[a].Price =res[a].Price.toLocaleString(this.country[a].CountryCode, { style: 'currency', currency: this.country[a].CurrencySymbol });
53
}
54
55
this.productCountryInformation[index] = res;
56
})
57
this.hideme[index] = !this.hideme[index];
58
this.Index = index;
59
}
60
onCountryChange($event) {
61
debugger;
62
this.countryId = $event;
63
if($event==0){
64
for(var a =0;a<this.products.length;a++){
65
this.priceToDisplay[a] =this.products[a].Price;
66
}
67
}else{
68
this.countryCode =this.country[$event-1].CountryCode;
69
this.currencySymbol =this.country[$event-1].CurrencySymbol;
70
for(var a =0;a<this.products.length;a++){
71
this.priceToDisplay[a] =this.products[a].Price.toLocaleString(this.countryCode, { style: 'currency', currency: this.currencySymbol });
72
}
73
}
74
}
75
}
Кроме того, я делюсь полным исходным кодом, чтобы было очень легко найти соответствующий вывод. Как только вы загрузите исходный код, вам просто нужно открыть его в VS Code и набрать npm install --save
в терминале. Это создаст node_module
файл, и ваш проект будет запущен без ошибок.
Следующее изображение отображается при нажатии на значок плюса, чтобы увидеть вложенную сетку, которая отображает цену во всех форматах с указанием названия страны и символа валюты.
Например, Индия использует точечную запись для своего десятичного знака с символом валюты в рупиях.
Следующее изображение отображается, если в раскрывающемся списке не выбрана страна.
При выборе Швеции в раскрывающемся списке отображается следующее изображение.
При выборе Кувейта в раскрывающемся списке отображается следующее изображение.
Ниже изображение является Countries
таблицей.