У меня есть 3 вкладки, в которых одна вкладка показывает таблицу со списком сотрудников. Хорошо работает, когда он загружается в первый раз .ngOnInit Получает данные с сервера, используя http get. После этого, когда я нажимаю добавить нового сотрудника, чтобы открыть форму, которая принимает данные от пользователя, и когда нажимается эта отправка, я вызываю функцию, которая вызывает почтовую службу http, чтобы отправить эти данные на мой сервер, где он вставляет записи, а затем после этого. он перенаправляется обратно в компонент сотрудника, но теперь, когда компонент сотрудника уже загружен, я не вижу новую запись, вставленную в таблицу, пока не перекомпилирую свой код.
employee.component.ts (который загружает таблицу сотрудников)
import { Component, OnInit, OnDestroy } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employees',
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
public employeeObj:any[] = [{emp_id:'',empname:'',joindate:'',salary:''}] ;
constructor(private employeService:EmployeeService) { }
ngOnInit() {
this.employeService.getEmployees().subscribe(res => this.employeeObj = res);
}
}
form.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EmployeeService } from '../../employee.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
empform;
ngOnInit() {
this.empform = new FormGroup({
empname: new FormControl(""),
joindate: new FormControl(""),
salary: new FormControl("")
})
}
constructor(private employeeService: EmployeeService, private router:Router)
{ }
onSubmit = function(user){
this.employeeService.addEmployee(user)
.subscribe(
(response) => { this.router.navigate(['/employees']); }
);
}
}
employee.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
@Injectable()
export class EmployeeService{
constructor(private http:Http){}
addEmployee(empform: any[]){
return this.http.post('MY_API',empform);
}
getEmployees(){
return
this.http.get('MY_API').map((response:Response)=>response.json());
}
}
AppModule.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { EmployeeService } from './employee.service';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavComponent } from './nav/nav.component';
import { ContainerComponent } from './container/container.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { EmployeesComponent } from './employees/employees.component';
import { CompaniesComponent } from './companies/companies.component';
import { InternsComponent } from './interns/interns.component';
import { FormComponent } from './employees/form/form.component';
import { ComformComponent } from './companies/comform/comform.component';
import { InternformComponent } from './interns/internform/internform.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
NavComponent,
ContainerComponent,
DashboardComponent,
EmployeesComponent,
CompaniesComponent,
InternsComponent,
FormComponent,
ComformComponent,
InternformComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot([
{
path:'dashboard',
component:DashboardComponent
},
{
path:'employees',
component:EmployeesComponent
},
{
path:'companies',
component:CompaniesComponent
},
{
path:'interns',
component:InternsComponent
},
{
path:'addemployee',
component:FormComponent
},
{
path:'comform',
component:ComformComponent
},
{
path:'internform',
component:InternformComponent
}
])
],
providers: [EmployeeService],
bootstrap: [AppComponent]
})
export class AppModule { }
Проблема в том, что я вызываю мой API из ngOnInit, который прекрасно загружается при первой загрузке компонента. Когда я отправляю форму, она отправляется в мой API, а затем перенаправляется обратно в компонент сотрудника, но данные не обновляются, как следует.
PS: прошу прощения за такой небольшой пост. Я новичок на этом сайте.
Обновить:
Прошло уже больше года с тех пор, как я разместил эту ветку, и я вижу, что многие люди получают от этого пользу, а может и нет. Однако я хотел бы отметить, что я уже понял, что вызвало ошибку, и теперь я постараюсь помочь вам понять решение.
Самая важная концепция для адаптации здесь - это угловые крючки жизненного цикла. Что происходит, мы вызываем ngOnInit при первой загрузке компонента, и он срабатывает только один раз, когда угловое приложение загружается. Это похоже на конструктор класса, но срабатывает только один раз. Таким образом, вы не должны помещать здесь какие-либо модификации, связанные с DOM. Вы должны понимать угловые крючки жизненного цикла, чтобы решить эту проблему. У меня нет рабочего решения, поскольку я переехал в Vuejs с последних 8 месяцев, но в свободное время я опубликую обновление здесь.