Как фиксируется метод POST с угловым 5

Question

Я разрабатываю приложение для портала, но когда я создаю новую роль, роль создается, но проблема в том, что добавленный элемент не отображается, он должен обновить браузер, чтобы отобразить этот новый элемент !!!, что мне делатьотобразить добавленный элемент непосредственно в моей таблице, и как разработать другие методы (положить и удалить) и поблагодарить (я разрабатываю это приложение с угловой 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,
    });
  }
}

Answer 1

Если ваше сообщение успешно, тогда обновите таблицу данных, добавив новую роль.

Этого можно добиться, добавив эту логику в функцию подписки.

После добавления и удаления должны следоватьта же концепция.Если ответ показывает, что запрос был успешно обработан, то (в подписке) вы можете изменить свою таблицу данных.

Две вещи, которые я заметил:

1. Старайтесь избегатьиспользуя jQuery с Angular.Эти двое не лучшие вместе.Вы можете получить ссылку на таблицу данных с помощью ViewChild .

2. Использование async / await с ngOnInit - плохая практика.