Использование Angular Augury для отладки вашего кода

 import { Component, OnInit } from '@angular/core'; import { User } from './user.model'; // <--- 1 import { UserService } from './user.service'; // <--- 2 @Component({ selector: 'app-users', templateUrl: './users.component.html', styleUrls: ['./users.component.css'] }) export class UsersComponent implements OnInit { users: User[]; selectedUser: User; onSelect(user: User): void { // <--- 3 this.selectedUser = user; } constructor(private userService: UserService) { } // <--- 4 ngOnInit() { this.getUsers(); // <--- 5 } getUsers(): void { // <--- 6 this.users = this.userService.getUsers(); } } 

Основные вещи, чтобы отметить здесь:

1. Мы импортируем User модель, которая будет создана в ближайшее время.
2. Мы также импортируем UserService . Он просто вернет список жестко закодированных пользователей, но давайте представим, что их выбирают из какого-то удаленного места.
3. Мы разрешаем пользователям выбирать, нажимая на них. Текущий выбранный пользователь хранится в отдельном атрибуте selectedUser .
4. userService используя механизм внедрения зависимостей.
5. Загрузите список пользователей после инициализации компонента.
6. Чтобы привлечь пользователей, мы используем наш userService .

Это в значительной степени это для этого компонента.

Далее, давайте создадим модель в файле src/app/users/user.model.ts . У каждого пользователя будет свой идентификатор, имя и фамилия:

 export class User { id: number; first: string; last: string; } 

Ничего сложного.

Теперь давайте перейдем к UserService который будет определен в файле app/src/users/user.service.ts :

 import { Injectable } from '@angular/core'; import { User } from './user.model'; @Injectable() export class UserService { constructor() { } getUsers(): User[] { return [ { id: 1, first: 'John', last: 'Doe' }, { id: 2, first: 'Margaret', last: 'Brown' } ] } } 

Метод getUsers просто возвращает массив пользователей с жестко закодированными данными.

Теперь давайте ngFor наших пользователей с помощью ngFor . Кроме того, мы собираемся добавить прослушиватель события click и onSelect при каждом нажатии на пользователя. Когда это происходит, должна отображаться форма для редактирования выбранного пользователя (что будет сделано с помощью ngIf ). Измените файл src/app/users/user.component.html следующим образом:

 <div *ngFor="let user of users" (click)="onSelect(user)" [class.selected]="user === selectedUser"> <p>{{user.last}}, {{user.first}} (ID: {{user.id}})</p> </div> <div *ngIf="selectedUser"> <h3>Edit</h3> <label for="first">First</label> <input [(ngModel)]="selectedUser.first" placeholder="First name" id="first"> <label for="last">Last</label> <input [(ngModel)]="selectedUser.last" placeholder="Last name" id="last"> </div> 

Мы назначаем CSS-класс .selected выбранному пользователю, поэтому давайте добавим несколько простых стилей для него в файле src/app/users/user.component.css :

 .selected { font-weight: bold; } 

Наконец, мы должны импортировать FormsModule и UserService src/app/app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; // <--- import { UserService } from './users/user.service'; // <--- import { AppComponent } from './app.component'; import { UsersComponent } from './users/users.component'; 

FormsModule должен быть указан в разделе imports в app.module.ts , а UserService — providers :

 @NgModule({ declarations: [ AppComponent, UsersComponent ], imports: [ BrowserModule, FormsModule // <--- ], providers: [ UserService // <--- ], bootstrap: [AppComponent] }) 

Это оно! Наш пример приложения завершен, и вы можете открыть его, выполнив следующую команду:

 ng serve --open 

Компонентный вид

Хорошо, теперь давайте посмотрим на положительные стороны, которые Огюри может предложить нам. Откройте Chrome и перейдите по http://localhost:4200 . Список пользователей должен отображаться. Нажмите Ctrl + Shift + I или Cmd + Opt + I , переключитесь на вкладку Augury и нажмите AppComponent на левой панели под деревом компонентов :