When developing an application for Portal, I encountered an issue where a newly created role is not displayed without refreshing the browser. How can I ensure that the added element is directly displayed in the table without needing to refresh the browser? Additionally, I am seeking guidance on how to implement other methods such as put and delete. Thank you. (I developed this application using Angular 5)
<form #personForm="ngForm" (ngSubmit)="onSubmit(personForm.value)">
<input name="RoleName" [(ngModel)]="RoleName">
<button type="submit">Save</button>
</form>
Below is the code snippet from my .ts file:
export interface Role {
RoleName: string;
}
@Component({
selector: 'app-role',
templateUrl: './role.component.html',
styleUrls: ['./role.component.css']
})
export class RoleComponent implements OnInit, AfterViewInit {
private roles: any;
constructor(private _roleService: RoleService, private http: HttpClient) { }
onSubmit(role: Role) {
return this.http.post('http://172.16.47.34:8282/MonProject.webservices/api/Roles', role).subscribe(status => console.log(JSON.stringify(status)));
}
async ngOnInit() {
this.roles = await this._roleService.getRoles();
}
ngAfterViewInit(): void {
$('#example-table').DataTable({
pageLength: 10,
});
}
}