Angular 从Firestore中删除
我正在为系统管理员实现管理仪表板系统,我正在使用Angular材质和Angular 8。添加用户,在表部件中查看工作正常。但我喜欢输入当我点击删除按钮时应该删除的部分。但它不起作用 这是我的 system-user.component.htmlAngular 从Firestore中删除,angular,google-cloud-firestore,angular-material,angular8,Angular,Google Cloud Firestore,Angular Material,Angular8,我正在为系统管理员实现管理仪表板系统,我正在使用Angular材质和Angular 8。添加用户,在表部件中查看工作正常。但我喜欢输入当我点击删除按钮时应该删除的部分。但它不起作用 这是我的 system-user.component.html <div class="main-content"> <div class="container-fluid"> <div class="row"> <div class="col-lg-
<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>
添加新系统用户
全名
{{row.fullName}
用户名
{{row.username}
角色
{{row.role}}
NIC
{{row.nic}}
联系电话
{{row.telNo}
行动
编辑
关闭
&时代;
添加新系统用户
{{验证}
{{验证}
{{验证}
{{验证}
用户角色
系统管理员
编辑
医院管理
管理
{{验证}
{{验证}
添加用户
这里是我的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();
}
}
从'@angular/core'导入{Injectable};
从'@angular/fire/firestore'导入{AngularFirestore,AngularFirestoreCollection,AngularFirestoreDocument};
从“../shared/system users.model”导入{SystemUsers};
从“rxjs”导入{Scheduler,Observable};
从“rxjs/operators”导入{map};
@注射的({
providedIn:'根'
})
导出类SystemUsersService{
数据来源:SystemUsers;
系统用户:可观察;
systemUsersCollection:AngularFirestoreCollection;
systemUsersList:AngularFirestoreDocument;
构造函数(私有firestore:AngularFirestore){
this.systemuserscolection=this.firestore.collection(“系统用户”);
this.systemUsers=this.systemUsersCollection.snapshotChanges().pipe(映射(更改=>{
返回changes.map(a=>{
const data=a.payload.doc.data()作为系统用户;
data.id=a.payload.doc.id;
返回数据;
})
}))
}
createSystemUser(值){
返回此.firestore.collection('System Users')。添加({
用户名:value.username,
fullName:value.fullName,
nic:value.nic,
telNo:value.telNo,
角色:value.role,
密码:value.password
})
}
deleteSystemUsers(数据源: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();
}
}
}
从'@angular/core'导入{Component,OnInit,ViewChild};
从'@angular/material/paginator'导入{MatPaginator};
从'@angular/material/sort'导入{MatSort};
从“@angular/material/table”导入{MatTableDataSource};
从“@angular/forms”导入{FormGroup、FormBuilder、FormControl、Validators};
从“@angular/material”导入{MatDialog};
从'@angular/Router'导入{Router};
从'app/services/firebase.service'导入{FirebaseService};
从“app/services/system users.service”导入{SystemUsersService};
重要的