我正在为系统管理员实现管理仪表板系统，并且我正在使用Angular Material和Angular8。添加用户，并在表中查看部分工作正常。但是我想输入的部分是，当我单击删除按钮时，应该将其删除。但它不起作用，
这是我的
system-user.component.html
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<button mat-raised-button color="primary" data-toggle="modal" data-target="#addNew">Add New System User</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let row"> {{row.id}} </td>
</ng-container> -->
<!-- Full Name Column -->
<ng-container matColumnDef="fullName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Full Name </th>
<td mat-cell *matCellDef="let row"> {{row.fullName}} </td>
</ng-container>
<!-- User Name Column -->
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef mat-sort-header> User Name </th>
<td mat-cell *matCellDef="let row"> {{row.username}} </td>
</ng-container>
<!-- Role Column -->
<ng-container matColumnDef="role">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Role </th>
<td mat-cell *matCellDef="let row" > {{row.role}} </td>
</ng-container>
<!-- NIC Column -->
<ng-container matColumnDef="nic">
<th mat-header-cell *matHeaderCellDef mat-sort-header> NIC </th>
<td mat-cell *matCellDef="let row" > {{row.nic}} </td>
</ng-container>
<!-- Telephone -->
<ng-container matColumnDef="telNo">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Contact Number </th>
<td mat-cell *matCellDef="let row" > {{row.telNo}} </td>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary" (click)="deleteSystemUsers($event, row)" >
<i class="material-icons">edit</i>
</button>
<button mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn">
<i class="material-icons">close</i>
</button>
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>
</div>
</div>
</div>
<!-- Buy-Modal-angular -->
<div class="modal modal-angular fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- form to add System Users-->
<div class="card">
<div class="card-header card-header-danger">
<h4 class="card-title">Add New System User</h4>
<!-- <p class="card-category">Complete your profile</p> -->
</div>
<div class="card-body">
<form class="create-form" [formGroup]="sysUsersForm" novalidate (ngSubmit)="onSubmit(sysUsersForm.value)">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<!-- <input matInput type="hidden" formControlName="id" class="form-control"> -->
<mat-form-field class="input-style">
<input matInput placeholder="User Name" class="form-control" formControlName="username">
</mat-form-field>
<ng-container *ngFor="let validation of validation_messages.username">
<mat-error *ngIf="sysUsersForm.get('username').hasError(validation.type) && (sysUsersForm.get('username').dirty || sysUsersForm.get('username').touched)">{{validation}}</mat-error>
</ng-container>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<mat-form-field class="input-style">
<input matInput placeholder="User Name" class="form-control" formControlName="fullName">
</mat-form-field>
<ng-container *ngFor="let validation of validation_messages.username">
<mat-error *ngIf="sysUsersForm.get('fullName').hasError(validation.type) && (sysUsersForm.get('fullName').dirty || sysUsersForm.get('fullName').touched)">{{validation}}</mat-error>
</ng-container>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<mat-form-field class="input-style">
<input matInput placeholder="NIC" class="form-control" formControlName="nic">
</mat-form-field>
<ng-container *ngFor="let validation of validation_messages.username">
<mat-error *ngIf="sysUsersForm.get('nic').hasError(validation.type) && (sysUsersForm.get('nic').dirty || sysUsersForm.get('nic').touched)">{{validation}}</mat-error>
</ng-container>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<mat-form-field class="input-style">
<input matInput placeholder="Contact Number" class="form-control" formControlName="telNo">
</mat-form-field>
<ng-container *ngFor="let validation of validation_messages.username">
<mat-error *ngIf="sysUsersForm.get('telNo').hasError(validation.type) && (sysUsersForm.get('telNo').dirty || sysUsersForm.get('telNo').touched)">{{validation}}</mat-error>
</ng-container>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<mat-form-field class="input-style">
<mat-label>User Role</mat-label>
<select matNativeControl placeholder="User Role" class="form-control" formControlName="role">
<option value="0">System Admin</option>
<option value="1">Editor</option>
<option value="2">Hospital Admin</option>
<option value="3">Admin</option>
</select>
</mat-form-field>
<ng-container *ngFor="let validation of validation_messages.role">
<mat-error *ngIf="sysUsersForm.get('role').hasError(validation.type) && (sysUsersForm.get('role').dirty || sysUsersForm.get('role').touched)">{{validation}}</mat-error>
</ng-container>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<mat-form-field class="input-style">
<input matInput placeholder="Password" type="password" class="form-control" formControlName="password">
</mat-form-field>
<ng-container *ngFor="let validation of validation_messages.password">
<mat-error *ngIf="sysUsersForm.get('password').hasError(validation.type) && (sysUsersForm.get('password').dirty || sysUsersForm.get('password').touched)">{{validation}}</mat-error>
</ng-container>
</div>
</div>
</div>
<div class="submit-button-container">
<button mat-raised-button type="submit" class="submit-button pull-right" color="primary" [disabled]="sysUsersForm.invalid">Add the User</button>
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
还有我的system.users.service.ts文件
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { SystemUsers } from '../shared/system-users.model';
import { Scheduler, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SystemUsersService {
dataSource: SystemUsers;
systemUsers: Observable<SystemUsers[]>;
systemUsersCollection: AngularFirestoreCollection<SystemUsers>;
systemUsersList: AngularFirestoreDocument<SystemUsers>;
constructor(private firestore: AngularFirestore) {
this.systemUsersCollection = this.firestore.collection('System Users');
this.systemUsers = this.systemUsersCollection.snapshotChanges().pipe(map(changes=>{
return changes.map(a=>{
const data = a.payload.doc.data() as SystemUsers;
data.id = a.payload.doc.id;
return data;
})
}))
}
createSystemUser(value){
return this.firestore.collection('System Users').add({
username: value.username,
fullName: value.fullName,
nic: value.nic,
telNo: value.telNo,
role: value.role,
password: value.password
})
}
deleteSystemUsers(dataSource: SystemUsers){
this.systemUsersList = this.firestore.doc('systemUsers/${row.id}');
this.systemUsersList.delete();
}
}
最终系统用户-.component.ts文件
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { Router } from '@angular/router';
import { FirebaseService } from 'app/services/firebase.service';
import { SystemUsersService } from 'app/services/system-users.service';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
export interface UserData{
// id: number;
username: string;
fullName: string;
nic: string;
telNo: string;
role: string;
password: string;
}
export interface Role{
value: number;
viewValue: string;
}
@Component({
selector: 'app-system-users',
templateUrl: './system-users.component.html',
styleUrls: ['./system-users.component.scss']
})
export class SystemUsersComponent implements OnInit {
//Modal Form to inser user
sysUsersForm: FormGroup;
//Validation error messages
validation_messages = {
'fullName':[
{ type:'required', message: "Please fill this"}
],
'username':[
{ type:'required', message: "Please fill this"}
],
'nic':[
{ type:'required', message: "Please fill this"}
],
'telNo':[
{ type:'required', message: "Please fill this"}
],
'role':[
{ type:'required', message: "Please fill this"}
],
'password':[
{ type:'required', message: "Please fill this"}
]
};
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
//systemUserList: AngularFirestoreCollection<UserData>;
dataSource: MatTableDataSource<UserData>;
displayedColumns: string[] = ['fullName', 'username', 'role','nic', 'telNo','action'];
constructor(
private fb: FormBuilder,
public dialog: MatDialog,
private router: Router,
public firebaseService: FirebaseService,
public systemUsersService: SystemUsersService,
private firestore: AngularFirestore
) {
}
ngAfterViewInit(){
this.firestore.collection<UserData>('System Users').valueChanges().subscribe(data => {
this.dataSource = new MatTableDataSource(data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
})
}
ngOnInit() {
// this.resetFields();
this.addSystemUser();
}
addSystemUser(){
this.sysUsersForm = this.fb.group({
fullName: ['', Validators.required],
username: ['',Validators.required],
nic: ['',Validators.required],
role: ['',Validators.required],
telNo: ['',Validators.required],
password: ['',Validators.required]
});
}
resetFields(){
this.sysUsersForm = this.fb.group({
fullName: new FormControl('', Validators.required),
username: new FormControl('', Validators.required),
nic: new FormControl('', Validators.required),
role: new FormControl('', Validators.required),
telNo: new FormControl('', Validators.required),
password: new FormControl('', Validators.required),
});
}
deleteSystemUsers(event,row){
const response = confirm("Are you sure want to delete?");
if(response){
this.systemUsersService.deleteSystemUsers(row);
}
}
showMessage : boolean = false;
onSubmit(value){
this.systemUsersService.createSystemUser(value)
.then(
res =>{
this.showMessage = true;
this.resetFields();
this.router.navigate(['system-users']);
}
)
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
您正在编写的集合不匹配。
您正在System Users创建文档，然后在systemUsers删除它们。 system_users是我的首选收藏名称