我使用firebase在Angular 5中创建了一个简单的CRUD操作,我对实现我的想法有疑问。我有来自db的用户列表。每个用户都有自己的<tr>
元素和9 <td>
。要在<td>
中添加按钮,向我显示所选用户下的编辑表单。我确实形成了一切都很好但我有一个问题:
我需要在用户点击编辑按钮后打开一次编辑表单。当我现在点击编辑按钮时,它会打开每个用户下的编辑表单。
... code here ...
<tbody>
<tr *ngFor="let user of userList; let i = index">
<td>{{i + 1}}</td>
<td>
{{user.nickName}}
</td>
<td>{{user.password}}</td>
<td>{{user.name}}</td>
<td>{{user.surname}}</td>
<td>{{user.dateOfBirth.year}}-{{user.dateOfBirth.month}}-{{user.dateOfBirth.day}} </td>
<td>{{user.group}}</td>
<td>
<a (click)="openEdit(user)">
<button class="btn btn-primary">
<i class="fas fa-edit"></i>
</button>
</a>
</td>
<td>
<button class="btn btn-danger">
<i class="fas fa-trash-alt"></i>
</button>
</td>
<td *ngIf="editForm">
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<div class="form-group">
<label>Nazwa</label>
<input class="form-control" name="nickName" #name="ngModel" [(ngModel)]="userService.selectedUser.nickName">
</div>
<div class="form-group">
<label>Hasło</label>
<input class="form-control" name="password" #name="ngModel" [(ngModel)]="userService.selectedUser.password">
</div>
<div class="form-group">
<label>Imię</label>
<input class="form-control" name="name" #name="ngModel" [(ngModel)]="userService.selectedUser.name">
</div>
<div class="form-group">
<label>Nazwisko</label>
<input class="form-control" name="surname" #name="ngModel" [(ngModel)]="userService.selectedUser.surname">
</div>
<div class="form-group">
<label>Data urodzenia</label>
<input class="form-control" name="dateOfBirth" #name="ngModel" [(ngModel)]="userService.selectedUser.dateOfBirth">
</div>
<div class="form-group">
<label>Grupa</label>
<select>
<option>Jeden</option>
</select>
<input class="form-control" name="group" #name="ngModel" [(ngModel)]="userService.selectedUser.group">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">Zapisz</button>
<button class="btn btn-default" type="button" (click)="resetForm(userForm)">Reset</button>
</div>
</form>
</td>
</tr>
</tbody>
... code here ...
component.ts
export class UsersComponent implements OnInit {
userList: User[];
editForm: boolean;
constructor(private userService: UserService) {}
ngOnInit() {
var x = this.userService.getData();
x.snapshotChanges().subscribe(item => {
this.userList = [];
item.forEach(element => {
var y = element.payload.toJSON();
y['$key'] = element.key;
this.userList.push(y as User);
})
})
}
openEdit(user: User) {
this.editForm = !this.editForm;
}
}
答案 0 :(得分:0)
试试这个。
export class UsersComponent implements OnInit {
userList: User[];
editForm: boolean;
clickedIndex: number;
constructor(private userService: UserService) {}
ngOnInit() {
var x = this.userService.getData();
x.snapshotChanges().subscribe(item => {
this.userList = [];
item.forEach(element => {
var y = element.payload.toJSON();
y['$key'] = element.key;
this.userList.push(y as User);
})
})
}
openEdit(user: User, pIndex: number) {
this.editForm = !this.editForm;
this.clickedIndex = pIndex
}
}
模板
<tbody>
<tr *ngFor="let user of userList; let i = index">
<td>{{i + 1}}</td>
<td>
{{user.nickName}}
</td>
<td>{{user.password}}</td>
<td>{{user.name}}</td>
<td>{{user.surname}}</td>
<td>{{user.dateOfBirth.year}}-{{user.dateOfBirth.month}}-{{user.dateOfBirth.day}} </td>
<td>{{user.group}}</td>
<td>
<a (click)="openEdit(user, i)">
<button class="btn btn-primary">
<i class="fas fa-edit"></i>
</button>
</a>
</td>
<td>
<button class="btn btn-danger">
<i class="fas fa-trash-alt"></i>
</button>
</td>
<td *ngIf="editForm && clickedIndex === i">
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<div class="form-group">
<label>Nazwa</label>
<input class="form-control" name="nickName" #name="ngModel" [(ngModel)]="userService.selectedUser.nickName">
</div>
<div class="form-group">
<label>Hasło</label>
<input class="form-control" name="password" #name="ngModel" [(ngModel)]="userService.selectedUser.password">
</div>
<div class="form-group">
<label>Imię</label>
<input class="form-control" name="name" #name="ngModel" [(ngModel)]="userService.selectedUser.name">
</div>
<div class="form-group">
<label>Nazwisko</label>
<input class="form-control" name="surname" #name="ngModel" [(ngModel)]="userService.selectedUser.surname">
</div>
<div class="form-group">
<label>Data urodzenia</label>
<input class="form-control" name="dateOfBirth" #name="ngModel" [(ngModel)]="userService.selectedUser.dateOfBirth">
</div>
<div class="form-group">
<label>Grupa</label>
<select>
<option>Jeden</option>
</select>
<input class="form-control" name="group" #name="ngModel" [(ngModel)]="userService.selectedUser.group">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">Zapisz</button>
<button class="btn btn-default" type="button" (click)="resetForm(userForm)">Reset</button>
</div>
</form>
</td>
</tr>