CRUD 后重新加载页面

Question

我正在寻找一种在对用户透明的 CRUD 操作之后重新加载页面的方法。

实际上在创建或删除之后，我必须重新加载页面以显示我的操作。

我使用 api 来制作这个，当我将它与 json 文件一起使用时，它工作正常。

谢谢

删除示例：

  dataSource = new MatTableDataSource();

  displayedColumns = ['first_name', 'middle_name', 'last_name', 'mail', 'role', 'action'];

  action: any;

  selectedUser: User;

  @Input() user: User;

  data: any;

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  constructor(private formBuilder: FormBuilder, private userService: UserService, public dialog: MatDialog) {

  }

  ngOnInit() {

    this.dataSource.sort = this.sort;

    this.dataSource.paginator = this.paginator;

    this.userService.getUsers()

      .subscribe(

        (response) => {

          this.dataSource.data = response;

        },

        (error) => {

          console.log('error ' + error);

        }

      );

  }

  onDelete(selectedUser){

    Swal.fire({

      title: 'Are you sure?',

      text: "You won't be able to revert this!",

      type: 'warning',

      showCancelButton: true,

      confirmButtonColor: '#3085d6',

      cancelButtonColor: '#d33',

      confirmButtonText: 'Yes, delete it!'

    }).then((result) => {

      if (result.value) {

        this.userService.delete(selectedUser.id).subscribe(res => {

          this.dataSource.data.splice(selectedUser.id, 1);

        });

        Swal.fire(

          'Deleted!',

          'User has been deleted.',

          'success'

        )

      }

    })

  }

Answer 1

BehaviorSubject在这种情况下，您将不得不使用。BehaviorSubject不断收听订阅者并在next发出时更新。dataSource: BehaviorSubject<MatTableDataSource[]> = new BehaviorSubject([]);onDelete(selectedUser) {&nbsp; Swal.fire({&nbsp; &nbsp; title: 'Are you sure?',&nbsp; &nbsp; text: "You won't be able to revert this!",&nbsp; &nbsp; type: 'warning',&nbsp; &nbsp; showCancelButton: true,&nbsp; &nbsp; confirmButtonColor: '#3085d6',&nbsp; &nbsp; cancelButtonColor: '#d33',&nbsp; &nbsp; confirmButtonText: 'Yes, delete it!'&nbsp; }).then(result => {&nbsp; &nbsp; if (result.value) {&nbsp; &nbsp; &nbsp; this.userService.delete(selectedUser.id).subscribe(res => {&nbsp; &nbsp; &nbsp; &nbsp; this.dataSource.value.data.splice(selectedUser.id, 1);&nbsp; &nbsp; &nbsp; &nbsp; this.dataSource.next(this.dataSource.value);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; Swal.fire('Deleted!', 'User has been deleted.', 'success');&nbsp; &nbsp; }&nbsp; });}其中 MatTableDataSource 应该是您的数据类型。

Answer 2

要刷新材料数据表，最简单的方法是刷新整个数据源：&nbsp;dataSource = new MatTableDataSource();&nbsp; displayedColumns = ['first_name', 'middle_name', 'last_name', 'mail', 'role', 'action'];&nbsp; action: any;&nbsp; selectedUser: User;&nbsp; @Input() user: User;&nbsp; data: any;&nbsp; @ViewChild(MatSort, {static: true}) sort: MatSort;&nbsp; @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;&nbsp; constructor(private formBuilder: FormBuilder, private userService: UserService, public dialog: MatDialog) {&nbsp; }&nbsp; ngOnInit() {&nbsp; &nbsp; this.loadDataTable();&nbsp; }&nbsp; loadDataTable() {&nbsp; &nbsp; this.dataSource.sort = this.sort;&nbsp; &nbsp; this.dataSource.paginator = this.paginator;&nbsp; &nbsp; this.userService.getUsers()&nbsp; &nbsp; &nbsp; .subscribe(&nbsp; &nbsp; &nbsp; &nbsp; (response) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.dataSource.data = response;&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; (error) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('error ' + error);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; );&nbsp; }&nbsp; onDelete(selectedUser){&nbsp; &nbsp; Swal.fire({&nbsp; &nbsp; &nbsp; title: 'Are you sure?',&nbsp; &nbsp; &nbsp; text: "You won't be able to revert this!",&nbsp; &nbsp; &nbsp; type: 'warning',&nbsp; &nbsp; &nbsp; showCancelButton: true,&nbsp; &nbsp; &nbsp; confirmButtonColor: '#3085d6',&nbsp; &nbsp; &nbsp; cancelButtonColor: '#d33',&nbsp; &nbsp; &nbsp; confirmButtonText: 'Yes, delete it!'&nbsp; &nbsp; }).then((result) => {&nbsp; &nbsp; &nbsp; if (result.value) {&nbsp; &nbsp; &nbsp; &nbsp; this.userService.delete(selectedUser.id).subscribe(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.loadDataTable();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Swal.fire(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Deleted!',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'User has been deleted.',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'success'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; // Probably you want to add some error handling here:&nbsp; &nbsp; &nbsp; &nbsp; (error) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.error(error);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })

Answer 3

使用get 调用管道删除调用。&nbsp; &nbsp; &nbsp; deleteUser(){ // called on click of delete&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.userSvc&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .deleteUser() // service function that deletes a user. Could be any of CUD (Create, Update or Delete&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .pipe(&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switchMap(data => this.userSvc.getUsers()) // pipe the result and perform retrieve.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp; .subscribe( result => this.users = result); // finally set the result on a field to show on the component template.&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }这是一个快速示例https://stackblitz.com/edit/angular-agpxba?embed=1&file=src/app/app.component.ts还有其他方法可以实现相同的目标，尤其是当我们使用 ngrx 等应用程序状态管理框架时。我们可能会识别状态更改并触发检索 API。这里的一个很简单。样品在 15 分钟内快速编码。