как автоматически обновлять sh данные при удалении в Angular - PullRequest
Новая
       3

как автоматически обновлять sh данные при удалении в Angular

0 голосов
/ 17 июня 2020

У меня есть данные пользователя в списке, и я только что реализовал вызов API удаления для выбранного пользователя, но по какой-то причине мой список не обновляется немедленно, и мне нужно обновить sh браузер, чтобы увидеть любые сделанные мной изменения . Я новичок в Angular, поэтому буду очень признателен, если смогу получить какое-либо предложение или помощь.

Я пробовал этот пример на YouTube https://www.youtube.com/watch?v=DvnzeCfYg0s&t=10s, но по какой-то причине мой еще не работает.

Workspace.service.ts 

  removeUsersFromWorkspace(guid: string, users: string[] ){
    return this.http.request('delete', `${environment.api.chart}/workspaces/${guid}/users`, {body: users});
    }

users.component.ts 

  ngOnInit(): void {

  }

  deleteSelectedUsers() {
    if (this.selection.selected.length > 0) {
      const users = this.selection.selected.map(item => {
        return item.gmid;
      });
      this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(response => {
        console.log("success!");
      }, error => {
        console.log("failed!");
      })
      this.snackbar.open('Selected user(s) have been deleted', '', {duration: 2000});
    }
  }

Я загрузил полный код этого компонента в stackblitz https://stackblitz.com/edit/angular-ivy-zapzz5, так что я буду очень признателен.

Ответы [ 3 ]

0 голосов
/ 18 июня 2020

Из примера кода выше

Здесь данные загружаются для вашей таблицы 

 ngOnChanges(changes: SimpleChanges){
if(changes.users) this.dataSource.data = this.users
console.log('CHANGES', changes)

}

Здесь пользователь удаляется из БД 

 this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(response => {
        console.log("success!");
      }, error => {
        console.log("failed!");
      })

}

В текущей ситуации, когда вы обновляете sh страницу в ngOnchanges, новые данные загружаются вместе с удаленным пользователем, для достижения того же без обновления страницы это 

     this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(response => {
        console.log("success!");
        // assuming this.users is an array 
        this.dataSource.data = this.users.filter(id => id != this.wsGuid);
        // assign updated array with deleted user to the data source
      }, error => {
        console.log("failed!");
      })

}
0 голосов
/ 18 июня 2020

Я не совсем понял, что это за функция, но если вам нужно обновить список sh пользователей, вы должны сделать это вручную, вот небольшая справка. 

deleteSelectedUsers() {
    if (this.selection.selected.length > 0) {
      const users = this.selection.selected.map(item => {
        return item.gmid;
      });
      this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(response => {
        // filter by ID
        this.users = this.users.filter(user => !users.find(u => u.id === user.id)); // is better to filter by user ID
        console.log("success!");
      }, error => {
        console.log("failed!");
      })
      this.snackbar.open('Selected user(s) have been deleted', '', {duration: 2000});
    }
  }
0 голосов
/ 17 июня 2020

Вы здесь кое-что упустили. 

         this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(
    response => {
            console.log("success!");
            // Here you need to update the list 
            const result = this.selection.selected.filter(id => id != this.wsGuid);
            // Bind this result data back to your component. This way the component gets updated with updated data 
            // with out the need to refresh the data 

    }
...