如何使用角度5固定方法POST

时间:2018-09-27 09:38:01

标签: html angular post httpclient

我为Portal开发应用程序,但是当我创建新角色时, 创建了角色,但问题是未显示添加的元素,它必须刷新浏览器以显示此新元素!!!,如何在表中直接显示添加的元素,以及如何开发其他元素方法(放置和删除)和感谢(我用角度5开发此应用程序) 这是我的代码.html:

<form #personForm="ngForm" (ngSubmit)="onSubmit(personForm.value)">
  <input name="RoleName" [(ngModel)]="RoleName">  
  <button type="submit">Save</button>
</form>

这是我的代码.ts:

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,
    });
  }
}

1 个答案:

答案 0 :(得分:0)

如果发布成功,请使用新添加的角色更新数据表。

您可以通过在订阅函数中添加此逻辑来实现此目的。

放置和删除应遵循相同的概念。如果响应显示请求已成功处理,则(在预订中)您可以修改数据表。

我注意到两件事:

  1. 尝试避免将jQuery与Angular一起使用。这两个不是最好的 一起。您可以通过以下方式获取数据表的参考: ViewChild

  2. 通过ngOnInit使用async / await是一种不好的做法。