我与用户一起使用表格,我希望在用户附近创建按钮,例如EDIT,并且在获得模态窗口后,但没有单击该对象。我尝试使 函数打开,我将参数USer发送到模态窗口。
我用ModalDirective
来填充模态窗口。
import { Component, ViewChild } from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import { UserService } from '../tables/user-table/user.service';
import { ModalDirective } from 'angular-bootstrap-md'
import { MatDialog, MatDialogRef } from '@angular/material';
@Component({
selector: 'app-table-overview-example',
templateUrl: './table-overview-example.component.html',
styleUrls: ['./table-overview-example.component.scss']
})
export class TableOverviewExampleComponent {
displayedColumns = ['index', 'email', 'phone', 'role', 'edit'];
dataSource: MatTableDataSource<UserData>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild('basicModal') basicModal: ModalDirective;
constructor(private userService: UserService) {
}
ngAfterViewInit() {
this.userService.getUsers().subscribe((res : UserData[]) => {
this.dataSource = new MatTableDataSource(res);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
exampleFunc(user: UserData) {
console.log(user);
}
open(user: UserData) {
console.log(user);
this.basicModal.show();
}
}
export interface UserData {
email: string;
phone: string;
role: string;
}