В этой статье мы узнаем, как создать вложенную сетку в Angular 8 . Мы используем список сетки, чтобы разделить страницу на маленькие секции. В каждом разделе мы хотим разместить отдельный компонент, где один из этих компонентов является другой меньшей сеткой.
Предпосылки
- Базовые знания по Angular.
- Код Visual Studio должен быть установлен.
- Угловой CLI должен быть установлен.
- Node.js должен быть установлен.
Строительство фронтенда
Шаг 1
Давайте создадим проект Angular, используя следующую команду npm.
JavaScript
xxxxxxxxxx
1
ng new nestedGrid
Шаг 2
Откройте недавно созданный проект в коде Visual Studio и установите Bootstrap в проект.
JavaScript
xxxxxxxxxx
1
npm install bootstrap --save
Теперь откройте файл styles.css и добавьте ссылку на файл Bootstrap. Чтобы добавить ссылку в файл styles.css , добавьте эту строку:
JavaScript
xxxxxxxxxx
1
@import '~bootstrap/dist/css/bootstrap.min.css';
Вам также может понравиться:
Angular 7 + Spring Boot Application: Пример Hello World .
Шаг 3
Теперь давайте создадим новый компонент с помощью следующей команды.
JavaScript
xxxxxxxxxx
1
ng g c product
Шаг 4
Теперь создайте новый сервис, используя следующую команду.
JavaScript
xxxxxxxxxx
1
ng generate service product
Шаг 5
Теперь откройте product.component.html и вставьте следующий код, чтобы увидеть шаблон HTML.
HTML
xxxxxxxxxx
1
<div class="card">
2
<div class="card-body pb-0">
3
<h4 style="text-align: center;">Example of Angular Nested Grid</h4>
4
<div class="row">
5
<div class="col-12 col-md-12">
6
<div class="card">
7
8
<div class="card-body position-relative">
9
<div class="table-responsive cnstr-record product-tbl">
10
<table class="table table-bordered heading-hvr">
11
<thead>
12
<tr>
13
<th> </th>
14
<th width="50">Art.No
15
</th>
16
<th>Brand</th>
17
<th>
18
Price/Unit</th>
19
<th>Provider</th>
20
<th>P. Art. N</th>
21
<th>S. A/C</th>
22
<th>Buy A/C</th>
23
</tr>
24
</thead>
25
26
<tbody *ngFor="let product of products; let i = index">
27
28
<tr>
29
<td align="center">
30
<a class="expand-row" *ngIf="!hideme[i]" (click)="showProductCountryInfo(i,product.ProductId)">
31
<img src="../../assets/Images/plus.png" />
32
33
</a>
34
<a class="expand-row" *ngIf="hideme[i]" (click)="hideme[i] = !hideme[i]">
35
<img src="../../assets/Images/minus.png" />
36
</a>
37
</td>
38
<td align="center">{{product.ArtNo}}</td>
39
<td>{{product.Brand}}</td>
40
<td>{{product.Price }}</td>
41
<td>{{product.Provider}}</td>
42
<td>{{product.ProviderArtNo}}</td>
43
<td>{{product.SalesAccount}}</td>
44
<td>{{product.BuyAccount}}</td>
45
</tr>
46
47
<!-- <div id="myresult" class="img-zoom-result"></div> -->
48
<tr [hidden]="!hideme[i]" class="sub-table no-bg">
49
<td align="center"> </td>
50
<td colspan="15" class="p-0">
51
<table class="table mb-0 table-striped">
52
<thead class="bg-dark text-white">
53
<tr>
54
<th>CountryName</th>
55
<th>Price/Unit</th>
56
<th>Sales Account</th>
57
<th>Buy Account</th>
58
59
</tr>
60
</thead>
61
<tbody>
62
<tr *ngFor="let productCountryInfo of productCountryInformation[i]">
63
<td>{{productCountryInfo.CountryName}}</td>
64
<td>{{productCountryInfo.Price}}</td>
65
<td>{{productCountryInfo.SalesAccount}}</td>
66
<td>{{productCountryInfo.BuyAccount}}</td>
67
68
</tr>
69
</tbody>
70
</table>
71
</td>
72
</tr>
73
74
</tbody>
75
</table>
76
</div>
77
</div>
78
</div>
79
</div>
80
</div>
81
</div>
82
</div>
Шаг 6
После этого откройте файл product.component.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
25
this.countryId=0;
26
this.getProducts(this.countryId);
27
}
28
29
public getProducts(countryId) {
30
let data = [];
31
this._productService.getAllProducts(countryId).subscribe((data: any) => {
32
this.products =data;
33
34
})
35
36
}
37
public showProductCountryInfo(index,productId) {
38
this._productService.countryInfo(productId).subscribe((res:any)=>{
39
this.productCountryInformation[index] = res;
40
})
41
this.hideme[index] = !this.hideme[index];
42
this.Index = index;
43
}
44
45
}
Шаг 7
Затем откройте файл product.component.css и вставьте код для стиля.
CSS
xxxxxxxxxx
1
@charset "utf-8";
2
/* CSS Document */
3
@media all{
4
*{padding:0px;margin:0px;}
5
div{vertical-align:top;}
6
img{max-width:100%;}
7
html {font-smoothing:antialiased; osx-font-smoothing:grayscale;}
8
body{overflow:auto!important; width:100%!important;}
9
html, body{background-color:#e4e5e6;}
10
html {position:relative; min-height:100%;}
11
12
13
.card{border-radius:4px;}
14
.card-header:first-child {border-radius:4px 4px 0px 0px;}
15
16
/*Typekit*/
17
html, body{font-family:'Roboto', sans-serif; font-weight:400; font-size:13px;}
18
body{padding-top:52px;}
19
20
p{font-family:'Roboto', sans-serif; color:#303030; font-weight:400; margin-bottom:1rem;}
21
input, textarea, select{font-family:'Roboto', sans-serif;}
22
23
h1,h2,h3,h4,h5,h6{font-family:'Roboto', sans-serif; font-weight:700;}
24
h1{font-size:20px; color:#000000; margin-bottom:10px;}
25
h2{font-size:30px;}
26
h3{font-size:24px;}
27
h4{font-size:18px;}
28
h5{font-size:14px;}
29
h6{font-size:12px;}
30
31
.row {margin-right:-8px; margin-left:-8px;}
32
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {padding-right:8px; padding-left:8px;}
33
34
.card-header{background-color:#f0f3f5; border-bottom:1px solid #c8ced3; font-size:13px; font-weight:600; color:#464646; text-transform:uppercase; padding:.75rem 8px;}
35
36
37
.cnstr-record th{white-space:nowrap;padding:.45rem .2rem; font-size:13px; border-bottom-width:0px!important;}
38
.cnstr-record thead{background:#f0f3f5;}
39
40
.cnstr-record .form-control{font-size:13px; padding:0px 0rem 0px 0.2rem; height:calc(2rem + 2px);}
41
.cnstr-record select.form-control{padding-left:.05rem;}
42
.cnstr-record .table td, .cnstr-record .table th {vertical-align:middle;}
43
.cnstr-record .table td{padding:.3rem;}
44
.cnstr-record .table td h4{margin:0px;}
45
46
.wp-50{width:50px;}
47
.wp-60{width:60px;}
48
.wp-70{width:70px;}
49
.wp-80{width:80px;}
50
.wp-90{width:90px;}
51
.wp-100{width:100px;}
52
.mw-auto{min-width:inherit;}
53
.expand-row{width:100%; border:solid 1px #596269; display:inline-block; border-radius:3px; width:16px; height:16px; vertical-align:top; background:#596269; color:#ffffff!important;}
54
.expand-row img{vertical-align:top; position:relative; top:2px;}
55
.sub-table th{font-weight:400; font-size:12px;}
56
.sub-table td{background:#efefef;}
57
.no-bg td{background:inherit;}
58
.mw-100{max-width:100%;}
59
60
}
Шаг 8
Наконец, откройте файл product.service.ts и добавьте сервисы для вызова нашего API.
JavaScript
xxxxxxxxxx
1
import { Injectable } from '@angular/core';
2
import { HttpClient } from '@angular/common/http';
3
4
5
@Injectable()
6
7
8
export class ProductsService {
9
10
private url = "";
11
12
constructor(public http: HttpClient) {
13
}
14
15
getAllProducts(countryCode) {
16
this.url = 'http://localhost:49661/api/Company/getAllProducts?countryCode='+countryCode;
17
return this.http.get<any[]>(this.url);
18
}
19
20
countryInfo(productId) {
21
this.url = 'http://localhost:49661/api/Company/getProductCountryInformation?productId='+productId;
22
return this.http.get<any[]>(this.url);
23
}
24
}
Шаг 9
Пришло время увидеть вывод в вашем терминале, ng serve -oчтобы скомпилировать и открыть его в браузере. После загрузки нашей страницы вы можете увидеть результат, как на картинках ниже.
Вот, я беру продукт, например. Данные сетки относятся к продукту, а соответствующая вложенная сетка содержит информацию, относящуюся к их родительской сетке.
Вы можете проверить вложенную сетку, щелкнув значок плюса родительской сетки, чтобы увидеть результирующую вложенную сетку на основе индекса (т. Е. Если вы нажмете на самый первый значок плюса, вы увидите только его первый продукт, связанный с продуктом). информация. Если щелкнуть значок второго плюса, отобразится информация о продукте.)
Теперь интерфейс завершен, и пришло время добавить код на стороне сервера.
WEB API — создание основного приложения ASP.NET
Выполните следующие действия, чтобы создать приложение ASP.NET Core.
Шаг 1
В Visual Studio 2019 выберите Файл -> Создать -> Проект .
Шаг 2
Выберите опцию « Создать» и выберите веб-приложение ASP.NET.
Шаг 3
Выберите Web API и нажмите Ok .
Шаг 4
Теперь щелкните правой кнопкой мыши на контроллере, а затем добавьте новый элемент.
Шаг 5
Выберите Ado.net Entity Data Model и нажмите « Добавить» .
Шаг 6
Следующим шагом является EF Designer, просто нажмите «Далее».
Шаг 7
Появится новое всплывающее окно. Нажмите на следующий . Если ваша не установлена, нажмите на новое соединение
Шаг 8
Скопируйте имя сервера подключения к базе данных и вставьте его в текстовое поле имени сервера. Вы увидите все доступные базы данных — выберите вашу базу данных и нажмите ОК .
Шаг 9
Следующее всплывающее окно покажет. Вставьте имя сервера базы данных, выберите правильную базу данных, протестируйте соединение и нажмите « Далее» . Здесь, на новом экране, выберите ваши таблицы и сохраните процедуру. Затем нажмите Готово.
Наш следующий шаг — щелкнуть правой кнопкой мыши на папке контроллеров и добавить новый контроллер. Назовите его «Контроллер продукта» и добавьте следующее пространство имен в контроллер студента.
Вот полный код для получения всех данных о продукте и вложенных данных о продукте.
Полный код контроллера продукта
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
}
Теперь пришло время включить CORS. Перейдите в Инструменты , откройте диспетчер пакетов NuGet , найдите CORS и установите пакет Microsoft.Asp.Net.WebApi.Cors .
Если вы запускаете приложение внешнего интерфейса на другом порту, отличном от вашего сервера, то, чтобы избежать проблемы перекрестного общего доступа к ресурсам, необходимо добавить следующий код в файл webapiconfig.cs:
C #
xxxxxxxxxx
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
2
config.EnableCors(cors);
Создание бэкэнда
Здесь мы продолжим создавать наш бэкэнд с сервером SQL. Самый первый шаг — создать базу данных.
Создать базу данных
Давайте создадим базу данных на вашем локальном сервере SQL. Я надеюсь, что вы установили SQL Server 2017 на свой компьютер (вы также можете использовать SQL Server 2008, 2012 или 2016).
Шаг 1
Создать базу данных, товар.
SQL
xxxxxxxxxx
1
create database product
Шаг 2
Создайте таблицу продуктов, используя следующий код:
SQL
xxxxxxxxxx
1
USE [Product]
2
GO
3
4
/****** Object: Table [dbo].[Product] Script Date: 12/18/2019 10:23:19 PM ******/
5
SET ANSI_NULLS ON
6
GO
7
8
SET QUOTED_IDENTIFIER ON
9
GO
10
11
CREATE TABLE [dbo].[Product](
12
[ProductId] [int] IDENTITY(1,1) NOT NULL,
13
[ProductCountryInformationId] [int] NULL,
14
[ArtNo] [nvarchar](50) NULL,
15
[Provider] [nvarchar](50) NULL,
16
[ProviderArtNo] [nvarchar](50) NULL,
17
[Brand] [nvarchar](50) NULL,
18
CONSTRAINT [PK_Product] PRIMARY KEY CLUSTERED
19
(
20
[ProductId] ASC
21
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
22
) ON [PRIMARY]
23
GO
24
25
ALTER TABLE [dbo].[Product] WITH CHECK ADD CONSTRAINT [FK_Product_ProductCountryInformation] FOREIGN KEY([ProductCountryInformationId])
26
REFERENCES [dbo].[ProductCountryInformation] ([ProductCountryInformationId])
27
GO
28
29
ALTER TABLE [dbo].[Product] CHECK CONSTRAINT [FK_Product_ProductCountryInformation]
30
GO
Сделайте ID продукта первичным ключом.
Шаг 3
Создайте таблицу информации о продукте, используя следующий код:
SQL
xxxxxxxxxx
1
USE [Product]
2
GO
3
4
/****** Object: Table [dbo].[ProductCountryInformation] Script Date: 12/18/2019 10:24:02 PM ******/
5
SET ANSI_NULLS ON
6
GO
7
8
SET QUOTED_IDENTIFIER ON
9
GO
10
11
CREATE TABLE [dbo].[ProductCountryInformation](
12
[ProductCountryInformationId] [int] NOT NULL,
13
[Price] [decimal](18, 2) NULL,
14
[BuyAccount] [nvarchar](50) NULL,
15
[SalesAccount] [nvarchar](50) NULL,
16
[CountryName] [nvarchar](50) NULL,
17
[ProductId] [int] NULL,
18
CONSTRAINT [PK_ProductCountryInformation] PRIMARY KEY CLUSTERED
19
(
20
[ProductCountryInformationId] ASC
21
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
22
) ON [PRIMARY]
23
GO
24
25
ALTER TABLE [dbo].[ProductCountryInformation] WITH CHECK ADD CONSTRAINT [FK_ProductCountryInformation_Product] FOREIGN KEY([ProductId])
26
REFERENCES [dbo].[Product] ([ProductId])
27
GO
28
29
ALTER TABLE [dbo].[ProductCountryInformation] CHECK CONSTRAINT [FK_ProductCountryInformation_Product]
30
GO
31
32
ALTER TABLE [dbo].[ProductCountryInformation] WITH CHECK ADD CONSTRAINT [FK_ProductCountryInformation_ProductCountryInformation] FOREIGN KEY([ProductCountryInformationId])
33
REFERENCES [dbo].[ProductCountryInformation] ([ProductCountryInformationId])
34
GO
35
36
ALTER TABLE [dbo].[ProductCountryInformation] CHECK CONSTRAINT [FK_ProductCountryInformation_ProductCountryInformation]
37
GO
Теперь пришло время добавить некоторые процедуры магазина.
Шаг 4
Все, что вам нужно сделать, это вставить следующий код в новый запрос:
SQL
xxxxxxxxxx
1
USE [Product]
2
GO
3
/****** Object: StoredProcedure [dbo].[USP_GetAllProducts] Script Date: 12/18/2019 10:24:35 PM ******/
4
SET ANSI_NULLS ON
5
GO
6
SET QUOTED_IDENTIFIER ON
7
GO
8
ALTER Proc [dbo].[USP_GetAllProducts]
9
As
10
Begin
11
Select p.*,pci.Price,pci.BuyAccount,pci.SalesAccount from [Product] p
12
left join [ProductCountryInformation] pci
13
on p.ProductCountryInformationId=pci.ProductCountryInformationId
14
End
15
16
USE [Product]
17
GO
18
/****** Object: StoredProcedure [dbo].[USP_getCountryInfo] Script Date: 12/18/2019 10:24:57 PM ******/
19
SET ANSI_NULLS ON
20
GO
21
SET QUOTED_IDENTIFIER ON
22
GO
23
ALTER Proc [dbo].[USP_getCountryInfo]
24
@ProductId int
25
As
26
Begin
27
select pci.* from ProductCountryInformation pci
28
left join Product p on pci.ProductId=p.ProductId
29
where pci.ProductId=@ProductId
30
End
На этом этапе мы успешно завершили наш интерфейс, веб-API и кодирование на стороне сервера.
Вывод
В этой статье я обсудил, как создать вложенную сетку в приложении Angular 8. В моей следующей статье, которая является продолжением этой части, мы узнаем о функции JavaScript tolocalestring(), изменив цену в зависимости от страны, которая даст соответствующий формат валюты.
Пожалуйста, дайте ваши ценные отзывы / комментарии / вопросы по этой статье. Пожалуйста, дайте мне знать, если вам понравилась и поняла эту статью и как я могу улучшить ее.