Angular 7 Пример CRUD | Учебное пособие по MEAN Stack с нуля

Пример Angular 7 CRUD | Учебное пособие по MEAN Stack является сегодня ведущей темой. В этой статье мы шаг за шагом создадим образец приложения Angular 7 с нуля и выполним операции CRUD . backend API будет доступен с использованием Node.js, и Express framework и MongoDB будет использоваться для постоянного хранения данных. Мы будем использовать Angular CLI 7 для создания шаблонного проекта. Этот Angular 7 CRUD Example Tutorial представляет собой исчерпывающее руководство по созданию веб-приложения CRUD (создание, чтение, обновление, удаление) с использованием нового Angular 7 Framework . Angular 7 только что выпущен, и в нем есть несколько новых функций и улучшений.

Функции и обновления Angular 7

Angular 7 был выпущен в октябре этого года с множеством новых функций, таких как как подсказки CLI, виртуальная прокрутка, перетаскивание, угловые бюджеты и многое другое. Начиная с этого выпуска, Angular поддерживает Node 10 и одновременно поддерживает поддержку Node 8 с TypeScript 3.1 и RxJS 6.3 . Новое расширение от @ angular/schematics под названием prompts было представлено с CLI, которое теперь будет запрашивать разработчиков при запуске общих команд, таких как ng new my-app . Ниже приведен список новых функций и обновлений Angular 7.

1. Новый ng-компилятор
2. подсказки интерфейса командной строки
3. Angular DoBootstrap
4. Увеличена производительность приложения
5. ScrollingModule и DragDropModule
6. Ivy Renderer
7. TypeScript 3.1
8. RxJS 6.3

Рабочий процесс Angular 7 Tutorial

Мы будем создать два отдельных проекта. Один предназначен для Angular , а другой — для Node.js | Экспресс | MongoDB . Это означает, что один для внешнего интерфейса и один для серверного интерфейса. Мы создадим внутренний API, и интерфейс будет использовать этот API. В этом примере я использую следующие технические стеки и их версии.

1. Node v10. 11.0
2. NPM v6.4.1
3. AngularCLI v7.0.2
4. Версия оболочки MongoDB
5. Версия MongoDB
6. Mac OS

Пример Angular 7 CRUD | MEAN Stack Tutorial

Сначала мы установим Angular 7 с помощью Angular CLI, а затем продолжим разработку внешнего и внутреннего интерфейса.

# 1: Установите Angular 7 и другие зависимости.

Если у вас более старая версия @ angular/cli, вы можете запустить следующую команду для установки последних версий.

 npm uninstall -g  @ angular/Clinpm cache verifynpm install -g @ angular/cli 

Если у вас возникли какие-либо проблемы, ознакомьтесь с моим Как обновить интерфейс командной строки Angular до версии 7. Это поможет вам обновить ваш Angular CLI , и вы сможете создать совершенно новый проект Angular seven.

Хорошо, теперь, если вы введете следующую команду, вы увидите, что мы обновили Angular CLI.

Теперь вы сможете создать новый проект Angular, используя следующую команду.

 ng new angular7crudcd angular7crud 

Зайдя в папку проекта, откройте проект в Визуальный Studio Code с помощью следующей команды. Если вы им не пользуетесь, начните им пользоваться. Это лучший редактор для разработки Javascript .

 code. 

Во время установки мы включили маршрутизацию для наше приложение. Это новинка в Angular 7 , потому что она будет запрашивать нас при установке шаблона angular. Вы можете проверить файл с именем app-routing.module.ts в каталоге src >> app .

Затем установите CSS Bootstrap 4 Framework с помощью следующей команды.

 npm install bootstrap  --save 

Теперь добавьте его в файл angular.json .

 "styles": ["src/styles  .css "," ./node_modules/bootstrap/dist/css/bootstrap.min.css "], 

Итак, теперь мы можем использовать классы Bootstrap 4 в нашем проекте.

Запустите сервер разработки Angular, используя следующую команду.

 ng serve -o 

Описание проекта

Мы создадим проект, в котором пользователь сможет ввести свое имя пользователя , название компании и номер GST из form и отправьте форму. Если значения неверны, тогда он будет проверен на веб-интерфейсе, и форма не будет отправлена. Если все значения кажутся идеальными, мы сможем отправить форму в backend API , и он сохранит значения в базе данных MongoDB .

Итак, теперь мы создадим несколько угловых компонентов для выполнения этой работы.

# 2: Создание угловых компонентов

Введите следующую команду для создания компонентов Angular 7 . Выполним операции создания, чтения, обновления. Итак, мы создадим три компонента.

 ng gc gst-add --spec = falseng gc gst-get --spec = falseng gc gst-edit --spec = false 

Все три компонента автоматически регистрируются внутри приложения . .module.ts . Теперь нам нужно настроить маршрутизацию компонентов angular внутри файла app-routing.module.ts .

//app-routing.module.tsimport {  NgModule} из '@ angular/core'; импортировать {Routes, RouterModule} из '@ angular/router'; импортировать {GstAddComponent} из './gst-add/gst-add.component'; импортировать {GstEditComponent} из '. /gst-edit/gst-edit.component';импорт {GstGetComponent} из './gst-get/gst-get.component';const routes: Routes = [{path:' business/create ', component: GstAddComponent}  , {путь: 'бизнес/редактировать/: идентификатор', компонент: GstEditComponent}, {путь: 'бизнес', компонент: GstGetComponent}]; @ NgModule ({импорт: [RouterModule.forRoot (маршруты)], экспорт: [RouterModule  ]}) экспортный класс AppRoutingModule {} 

Теперь вы можете увидеть внутри файла app.component.html , что директива есть. Эта директива помогает нам отображать различные компоненты на основе URI маршрута.

# 3: Создать Angular Navigation

Write следующий код внутри файла app.component.html .

Сохраните файл, перейдите в браузер и щелкните по двум ссылкам. Вы можете видеть, что мы можем видеть различные компоненты на основе навигации.

# 4: Установите индикатор выполнения угловой маршрутизации.

Введите следующую команду, чтобы установить библиотеку ng2-slim-loading-bar .

 npm install ng2-slim-loading-bar --save 

Итак, если вы устанавливаете сторонние пакеты прямо сейчас, то они несовместимы с Angular 7 . Чтобы преодолеть разрыв между Angular 7 и сторонними пакетами, нам необходимо установить следующую библиотеку. Вот и все.

 npm install rxjs-compat --save 

Теперь импортируйте SlimLoadingBarModule внутри файл app.module.ts .

//app.module.tsimport {SlimLoadingBarModule} из 'ng2-slim-loading-bar'; импорт: [... SlimLoadingBarModule], 

Следующим шагом является включение стиля, поставляемого с библиотекой, в файл src >> styles.css .

 @import "../node_modules/ng2-slim-loading-bar/style.css"; 

# 5: Добавление событий маршрутизатора.

Angular RouterModule предоставляет нам следующие модули событий.

1. NavigationStart
2. NavigationEnd
3. NavigationError
4. NavigationCancel
5. Router
6. Event

Теперь напишите следующий код внутри файл app.component.ts .

//app.component.tsimport {Component} from '@ angular/core'; import {SlimLoadingBarService} from '  ng2-slim-loading-bar '; import {NavigationCancel, Event, NavigationEnd, NavigationError, NavigationStart, Router} из' @ angular/router '; @ Component ({selector:' app-root ', templateUrl:' ./app.  component.html ', styleUrls: [' ./app.component.css'pting})export class AppComponent {title = 'angular7crud';  конструктор (частный _loadingBar: SlimLoadingBarService, частный _router: Router) {this._router.events.subscribe ((event: Event) => {this.navigationInterceptor (event);});  } частный NavigationInterceptor (событие: событие): void {if (instanceof NavigationStart) {this._loadingBar.start ();  } если (событие instanceof NavigationEnd) {this._loadingBar.complete ();  } если (событие instanceof NavigationCancel) {this._loadingBar.stop ();  } если (событие instanceof NavigationError) {this._loadingBar.stop ();  }}} 

Что он делает: он перехватывает событие маршрутизации и добавляет компонент полосы загрузки к каждому маршруту, чтобы мы могли видеть индикацию маршрутизации каждый раз, когда мы меняем маршруты.

Последнее изменение в отображении индикатора маршрутизации состоит в том, что нам нужно добавить директиву ng2-slim-loading-bar в app.component.html вверху страницы.

Сохраните файл и перейдите в терминал, чтобы увидеть, есть ли ошибка, а если нет, перейдите в браузер и c измените маршруты, и вы увидите, что теперь мы можем видеть индикатор маршрутизации.

# 6: Добавить форму начальной загрузки

Внутри gst-add.component. html добавьте следующую форму bootstrap 4 .

 
 
   
  Имя человека   
 
  Название компании   
   Бизнес-номер GST   
 
  Добавить компанию  
  
 

# 7. Добавление проверки угловой формы

Мы будем использовать ReactiveFormsModule . Так что, если вы новичок в проверке формы Angular , ознакомьтесь с моей статьей Пример проверки формы Angular 7 в этом блоге.

Теперь импортируйте ReactiveFormsModule внутри файла app.module.ts .

//app.module  .tsimport {ReactiveFormsModule} из '@ angular/forms'; import: [... ReactiveFormsModule], 

Теперь нам нужно написать код для компонента app.component. ts . Помните, что это не шаблонная форма. Поэтому мы изменим код внутри файла app.component.ts .

Сначала мы импортируем FormGroup, FormBuilder, Validators модули из @ angular/forms .

Кроме того, создайте конструктор и создайте экземпляр FormBuilder .

Итак, напишите следующий код внутри файла gst-add.component.ts .

//gst-add.component.tsimport {Component  , OnInit} из '@ angular/core'; импортировать {FormGroup, FormBuilder, Validators} из '@ angular/forms'; @ Component ({selector: 'app-gst-add', templateUrl: './gst-add.  component.html ', styleUrls: [' ./gst-add.component.css' visible})export class GstAddComponent реализует OnInit {angForm: FormGroup;  конструктор (частный fb: FormBuilder) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({person_name: ['', Validators.required], business_name: ['', Validators.required], business_gst_number: ['', Validators.required]})  ;  } ngOnInit () {}} 

Мы использовали конструктор форм для обработки всей проверки. Итак, в этом конструкторе мы создаем форму с правилами проверки. В нашем примере есть три поля. Если вводимый текст пуст, он выдаст ошибку, и нам нужно отобразить эту ошибку..

Теперь напишите следующий код внутри файла gst-add.component.html .

 
 
  
  Имя человека   
 
 
 Человек  Имя обязательно.  
 
 
  Название компании   
 
 
 Требуется бизнес-лицо.  
 
 
  Бизнес-номер GST   
 
 
 Требуется бизнес-номер GST.  
 
 
  Добавить компанию   
  
 

Сохраните файл и перейдите в браузер, и вы увидите, если вы не поместили внутри какое-либо значение поле ввода, то вы увидите ошибки.

# 8: Настройте HttpClientModule

Импортируйте HttpClientModule внутри файл app.module.ts .

//app.module.tsimport {HttpClientModule} из '@ angular/common/http'; импорт: [... HttpClientModule]  , 

# 9: Создайте модель.

Внутри приложения src >> папку, создайте один файл с именем Business. ts и добавьте следующий код.

//Класс Business.tsexport по умолчанию Business {person_name: String;  business_name: String;  business_gst_number: Number;} 

# 10: Создайте файл службы Angular.

Введите следующую команду для создания файла службы .

 ng g service business --spec = false 

Итак, ваш основной бизнес .service. ts выглядит так.

//business.service.tsimport {Injectable} from '@ angular/core'; @ Injectable ({providedIn: 'root'}) класс экспорта  BusinessService {constructor () {}} 

Теперь импортируйте файл business.service.ts в app.module.ts файл.

//app.module.tsimport {BusinessService} из './business.service';providers: [BusinessService], 

# 11: Отправьте данные на сервер узла

Теперь нам нужно написать код, который будет отправлять запрос POST HTTP с данные на сервер Node.js и сохраните данные в базе данных MongoDB .

Wri следующий код внутри файла business.service.ts .

//business.service.tsimport {Injectable} from '@ angular/core'; import  {HttpClient} из '@ angular/common/http'; @ Injectable ({providedIn: 'root'}) экспортный класс BusinessService {uri = 'http://localhost: 4000/business';  конструктор (частный http: HttpClient) {} addBusiness (person_name, business_name, business_gst_number) {const obj = {person_name: person_name, business_name: business_name, business_gst_number: business_gst_number};  console.log (объект);  this.http.post (`$ {this.uri}/add`, obj) .subscribe (res => console.log ('Done'));  }} 

Мы определили URL-адрес нашего внутреннего API, но мы еще не создали никакого внутреннего интерфейса, но мы сделаем это за пару шагов.

Теперь мы нужно добавить событие щелчка к кнопке «Добавить бизнес». Поэтому добавьте следующий код в файл gst-add.component.html .

 
  Добавить компанию  
 

Итак, когда ошибок нет, мы можем отправить форму, и она вызовет функцию компонента addBusiness . Оттуда мы вызовем службу angular, и служба отправит запрос HTTP Post на сервер Node.js .

Теперь добавьте функцию addBusiness в файл gst-add.component.ts . Поэтому напишите следующий код внутри файла gst-add.component.ts .

//gst-add.component. tsimport {Component, OnInit} из '@ angular/core'; импортировать {FormGroup, FormBuilder, Validators} из '@ angular/forms'; импортировать {BusinessService} из '../business.service'; @ Component ({selector:  'app-gst-add', templateUrl: './gst-add.component.html', styleUrls: ['./gst-add.component.css'ght})export class GstAddComponent реализует OnInit {angForm: FormGroup;  конструктор (частный fb: FormBuilder, частный bs: BusinessService) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({person_name: ['', Validators.required], business_name: ['', Validators.required], business_gst_number: ['', Validators.required]})  ;  } addBusiness (person_name, busines_name, business_gst_number) {this.bs.addBusiness (person_name, busines_name, business_gst_number);  } ngOnInit () {}} 

Здесь мы определили функцию, а также импортировали файл business.service.ts . Создайте экземпляр объекта внутри конструктора и используйте его для вызова функции файла businsess.service.ts .

Мы уже написали код addBusiness внутри файла business.service.ts . Теперь нам нужно настроить серверный API.

# 12: Создать серверный API Node.js

Внутри angular корневую папку, создайте одну папку с именем api и войдите в нее. Помните, что это будет совершенно отдельный проект от Angular. Таким образом, его node_modules отличаются от Angular .

Откройте терминал внутри api и введите следующую команду.

 npm init -y 

Установите следующие модули, специфичные для узла.

 npm install -  save express body-parser cors mongoose 

Я не перезапускаю сервер узла каждый раз; Меняю файл. Итак, я устанавливаю сервер nodemon . Что он делает, так это то, что когда я изменяю файл server.js , он автоматически перезапускает сервер node.js .

 npm install nodemon --save-dev 

Теперь внутри папки api создайте один файл, который называется сервером . js .

//server.jsconst express = require ('express'), path = require ('path'), bodyParser = require ('body-parser'),  cors = require ('cors'), mongoose = require ('mongoose');  константное приложение = экспресс ();  let port = process.env.PORT ||  4000;  const server = app.listen (function () {console.log ('Прослушивание порта' + порт);}); 

Следующим шагом является подключение базы данных MongoDB к нашему приложению node.js .

Если вы не установили базу данных MongoDB, установите ее и затем запустите сервер mongodb.

Введите следующую команду, чтобы запустить MongoDB сервер.

 mongod 

Итак, теперь я подключился к базе данных.

Создайте один файл с именем DB.js в корневой папке проекта api . Напишите следующий код внутри файла DB.js .

//DB.jsmodule.exports = {DB: 'mongodb://localhost: 27017/ng7crud  '}; 

Импортируйте этот файл DB.js в наш файл server.js и используйте mongoose библиотека , чтобы установить соединение с базой данных с MongoDB . Мы также можем использовать Mongoose для сохранения данных в базе данных с помощью Mongoose ORM.

Напишите следующий код внутри файла server.js для подключения нашего MongoDB на сервер Node.js .

//server.jsconst express = require ('express'), path = require  ('путь'), bodyParser = require ('body-parser'), cors = require ('cors'), mongoose = require ('mongoose'), config = require ('./DB');  mongoose.Promise = global.Promise;  mongoose.connect (config.DB, {useNewUrlParser: true}). then (() => {console.log ('База данных подключена')}, err => {console.log ('Невозможно подключиться к базе данных'  + err)});  константное приложение = экспресс ();  app.use (bodyParser.json ());  app.use (cors ());  const port = process.env.PORT ||  4000;  const server = app.listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); 

Сохраните файл, перейдите в терминал и запустите узел server.

 nodemon server 

Итак, прямо сейчас у вас работает три сервера.

1. Angular Development Сервер
2. Сервер Nodemon
3. Сервер MongoDB

Помните, что все три сервера работают нормально без каких-либо ошибок, в противном случае наш приложение не будет работать.

# 13: Создайте модель и маршруты для нашего приложения.

Теперь нам нужно создать два папки внутри api root папки с названиями routes и models .

В папке models создайте одну модель под названием Business.js .

//Business.jsconst mongoose = require ('mongoose'); const Schema = mongoose.Schema;//Определение коллекции и схемы для Businesslet Business = new S  chema ({person_name: {type: String}, business_name: {type: String}, business_gst_number: {type: Number}}, {collection: 'business'}); module.exports = mongoose.model ('Business', Business  ); 

Итак, мы определили нашу схему для бизнес-коллекции. У нас есть три поля: person_name, business_name, business_gst_number.

В папке routes создайте один файл с именем business.route.js.

Напишите код CRUD внутри файла business.route.js .

//business.route. jsconst express = require ('express'); const app = express (); const businessRoutes = express.Router ();//Требовать бизнес-модель в нашем модуле маршрутовlet Business = require ('../models/Business');//Определен магазин routebusinessRoutes.route ('/add'). Post (function (req, res) {let business = new Business (req.body); business.save () .then (business => {res.status (200  ) .json ({'business': 'бизнес успешно добавлен'});}) .catch (err => {res.status (400) .send ("невозможно сохранить в базу данных");});})  ;//Определено получение данных (индекс или листинг) routebusinessRoutes.route ('/'). Get (function (req, res) {Business.find (function (err, Business) {if (err) {console.log (err  );} else {res.json (Business);}});});//Определено edit routebusinessRoutes.route ('/edit/: id'). get (function (req, res) {let id = req.  params.id; Business.findById (id, function (err, business) {res.json (business);});});//Определенное обновление routebusinessRoutes.route ('/update/: id'). post (function  (req, res) {Business.findById  (req.params.id, function (err, next, business) {if (! business) return next (new Error ('Не удалось загрузить документ'));  иначе {business.person_name = req.body.person_name;  business.business_name = req.body.business_name;  business.business_gst_number = req.body.business_gst_number;  business.save (). then (business => {res.json ('Обновление завершено');}) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");}  );  }});});//Определенное удаление |  удалить |  уничтожить routebusinessRoutes.route ('/delete/: id'). get (function (req, res) {Business.findByIdAndRemove ({_ id: req.params.id}, function (err, business) {if (err) res.  json (err); else res.json ('Успешно удалено');});}); module.exports = businessRoutes; 

Здесь мы использовали модель мангуста для сохранения, обновления, удалить данные из базы данных. Mongoose — это ORM , используемый в базе данных MongoDB . Теперь у нас есть все операции CRUD, настроенные для файла маршрута; нам нужно импортировать внутри файла server.js .

Итак, наш последний файл server.js выглядит так.

//server.jsconst express = require ('express'), path = require ('path'), bodyParser = require ('body-parser'), cors = require ('cors'  ), mongoose = require ('mongoose'), config = require ('./DB'); const businessRoute = require ('./routes/business.route'); mongoose.Promise = global.Promise; mongoose.connect (  config.DB, {useNewUrlParser: true}). then (() => {console.log ('База данных подключена')}, err => {console.log ('Невозможно подключиться к базе данных' + err)}  ); const app = express (); app.use (bodyParser.json ()); app.use (cors ()); app.use ('/business', businessRoute); const port = process.env.PORT |  |  4000; const server = приложение. listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); 

# 14: Проверить функциональность сохранения данных

Если все ваши серверы запущены и работают, вы можете перейти в браузер, заполнить данные формы и добавить бизнес. В случае успеха вы можете увидеть что-то подобное на своем экране.

Теперь мы можем проверить базу данных с помощью следующих команд.

Сначала откройте оболочку mongo на 4-й вкладке, потому что все остальные три вкладки заняты в данный момент.

 mongo 

Здесь мы видим, что значения хранятся в базе данных MongoDB. Да !! Нам это удалось.

Теперь оставшиеся операции — это чтение, обновление и удаление.

# 15: Отображение данных во внешнем интерфейсе

В файле gst-get.component.html напишите следующий код.

Теперь внутри файла business .service.ts нам нужно написать функцию, которая выбирает business данные из базы данных MongoDB и отображать их в приложении Angular n .

//business.service.tsgetBusshops () {вернуть этот .http .get (`$ {this.uri}`);  } 

Теперь нам нужно включить этот файл business.service.ts и файл Business.ts в gst-get .component.ts .

Напишите следующий код внутри gst-get.component .ts .

//gst-get.component.tsimport {Component, OnInit} from '@ angular/core'; import Business from '../Business';import  {BusinessService} из '../business.service'; @ Component ({selector: 'app-gst-get', templateUrl: './gst-get.component.html', styleUrls: ['./gst-get  .component.css ']}) класс экспорта GstGetComponent реализует OnInit {предприятия: Business [];  конструктор (частный bs: BusinessService) {} ngOnInit () {this.bs .getBusshops () .subscribe ((data: Business []) => {this. предприятия = данные;  });  }} 

Сохраните файл, перейдите в браузер и переключитесь на этот URL: http://localhost: 4200/business. Вы можете увидеть список предприятий.

# 16: Редактировать и обновлять данные

Хорошо, сначала , нам нужно получить данные из базы данных MongoDB, используя _id, и отобразить эти данные в файле gst-edit .component.html .

Итак, сначала напишите следующий код внутри файла gst-edit.component.ts .

//gst-edit.component.  tsimport {Component, OnInit} из '@ angular/core'; импорт {ActivatedRoute, Router} из '@ angular/router'; импорт {FormGroup, FormBuilder, Validators} из '@ angular/forms'; импорт {BusinessService} из '  ../business.service '; @ Component ({selector:' app-gst-edit ', templateUrl:' ./gst-edit.component.html ', styleUrls: [' ./gst-edit.component.css '  ]}) класс экспорта GstEditComponent реализует OnInit {business: any = {};  angForm: FormGroup;  конструктор (частный маршрут: ActivatedRoute, частный маршрутизатор: маршрутизатор, частный bs: BusinessService, частный fb: FormBuilder) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({person_name: ['', Validators.required], business_name: ['', Validators.required], business_gst_number: ['', Validators.required]})  ;  } ngOnInit () {this.route.params.subscribe (params => {this.bs.editBusiness (params ['id']). subscribe (res => {this.business = res;});});  }} 

Здесь при рендеринге gst-edit component.ts он вызовет метод ngOnInit и отправит HTTP-запрос к серверу узла и выборка данных из _id для отображения внутри файла gst-edit.component.html .

Теперь внутри файла business.service.ts нам нужно закодировать функцию editBusiness для отправки HTTP-запроса.

//business.service.tsimport {Injectable} из '@ angular/core'; импорт {HttpClient} из '@ angular/common/http'; @ Injectable ({providedIn: 'root'}) экспортный класс BusinessService  {uri = 'http://localhost: 4000/business';  конструктор (частный http: HttpClient) {} addBusiness (person_name, business_name, business_gst_number) {const obj = {person_name: person_name, business_name: business_name, business_gst_number: business_gst_number};  this.http.post (`$ {this.uri}/add`, obj) .subscribe (res => console.log ('Done'));  } getBusshops () {вернуть этот .http .get (`$ {this.uri}`);  } editBusiness (id) {вернуть этот .http .get (`$ {this.uri}/edit/$ {id}`);  }} 

Теперь, наконец, нам нужно написать форму внутри файла gst-edit.component.html ..

 
 
  
  Имя человека    
 
 
 Укажите имя человека.  
 
 
  Название компании   
 
 
 Требуется бизнес-лицо.  
 
 
  Бизнес-номер GST   
 
 
 Номер GST для бизнеса  обязательный.  
 
 
  Обновить бизнес  
  
 

Сохраните файл, перейдите на страницу со списком и нажмите на кнопке редактирования, и вы увидите заполненную форму из базы данных.

Вы также можете увидеть предупреждение, подобное приведенному ниже. Не обращайте внимания на это демонстрационное руководство.

//business.service.tsupdateBusiness  (person_name, business_name, business_gst_number, id) {const obj = {person_name: person_name, business_name: business_name, business_gst_number: business_gst_number};  this .http .post (`$ {this.uri}/update/$ {id}`, obj) .subscribe (res => console.log ('Done'));  } 

//gst-edit.component.tsupdateBusiness (person_name, business_name, business_gst_number) {this.route.params.subscribe (params => {this.bs.updateBusiness (person_name, business_name, business_gst_number, params [')  id ']); this.router.navigate ([' business ']);}); 

   {{business.person_name}}   {{business.business_name}}   {{business.business_gst_number}}    Изменить     Удалить    

//gst-get.component.tsdeleteBusiness (id) {this.bs.deleteBusiness (id) .subscribe (res => {console.log  ('Удалено');});  } 

//business.service.tsdeleteBusiness (id) {вернуть этот .http .get (`$ {this.uri}/delete/$ {id}`);  }