用户列表
<div class="wrapper cf">
<div class="user-list">
<ul class="user-display-data users">
<li *ngFor="let user of users" class="cf"
[class.selected]="user === selectedUser"
(click)="onSelect(user); showDetails=1;">
<div class="user-badge-link" ><span class="display-data user-badge">{{user.first_name}} {{user.last_name}}</span>
<span class="user-display-data user-display-edit">Edit</span></div>
</li>
</ul>
</div>
<div class="user-details" *ngIf="showDetails === 1" >
<app-user-detail [user]="selectedUser"></app-user-detail>
</div>
</div>
更新窗体
<div class="details-wrapper">
<div>
<h2 class="sub-head-h2">{{user.first_name}} {{user.last_name}} Account Details</h2>
<div class="user-detail-data">
<div class="input-row">
<label>First Name:</label>
<input ng-model="first_name" value="{{user.first_name}}" />
</div>
<div class="input-row-odd">
<label>Last Name:</label>
<input ng-model="last_name" value="{{user.last_name}}" />
</div>
<div class="input-row">
<label>Email:</label>
<input ng-model="email" value="{{user.email}}" />
</div>
<input type="hidden" name="id" id="id" ng-model="id" value="{{user.id}}" />
<button class="small-button" (click)="save()">Update User</button>
<button class="small-button" (click)="delete()">Delete User</button>
</div>
</div>
</div>
我在我的服务中设置了一个功能,可以在单击时更新用户:
updateUser (user: User): Observable<any> {
var userUpdatedUrl = 'http://dbs:8888/user-update/' + user.id + '/' + user.first_name + '/' + user.last_name + '/' + user.email + '/' + user.password;
console.log(userUpdatedUrl);
return this.http.get(userUpdatedUrl).pipe(tap(_ => this.log(`updated user id=${user.id}`)), catchError(this.handleError<any>('updateUser'))
);
}