Angular 添加项目后刷新项目列表_Angular

Angular 添加项目后刷新项目列表

angular

Angular 添加项目后刷新项目列表,angular,Angular,您好，我正在angular上开发一个应用平台，我有一个部分可以让应聘者填写他们的专业经验！问题是，我无法在添加体验后更新体验列表体验.组件.ts @Output() newExperience: EventEmitter<any> = new EventEmitter<any>(); ... addNewExperience(){ .... this.newExperience.emit(this.addForm.value); // emit experi

您好，我正在angular上开发一个应用平台，我有一个部分可以让应聘者填写他们的专业经验！问题是，我无法在添加体验后更新体验列表

体验.组件.ts

@Output() newExperience: EventEmitter<any> = new EventEmitter<any>();
 ...

addNewExperience(){
 .... 
 this.newExperience.emit(this.addForm.value); // emit experience
}

handleNewExperience(experience: any){ // This should be typed parameter
 this.experience.push(experience);
}

<add-experience (newExperience)="handleNewExperience($event)"></add-experience>

导出类体验组件在NIT上实现{
经验：数组=[]；
建造师(
私人体验服务：体验服务，
专用modalService:NgbModal，
私人场所：场所，
) { }
ngOnInit（）：void{
此.experienceService.getExperiences（）.subscribe(
result=>this.experience=result
)
}
/**
*添加新体验
*@param addModel
*/
addExperience（addModel:Experience）{
const add=this.modalService.open（AddExperienceComponent，{centered:true}）；
add.componentInstance.selectedExperience=addModel；
}
}

添加experience.component.ts

@Output() newExperience: EventEmitter<any> = new EventEmitter<any>();
 ...

addNewExperience(){
 .... 
 this.newExperience.emit(this.addForm.value); // emit experience
}

handleNewExperience(experience: any){ // This should be typed parameter
 this.experience.push(experience);
}

<add-experience (newExperience)="handleNewExperience($event)"></add-experience>

导出类AddExperienceComponent实现OnInit{
addForm:FormGroup；
提交=错误；
经验
新体验：体验={
帖子：''，
企业：''，
维尔：“，
日期：''，
dateFin:“”，
详细信息：“”
}
建造师(
公共模式：NgbActiveModal，
私人体验服务：体验服务，
私有formBuilder:formBuilder，
) { }
ngOnInit（）：void{
this.setExperienceForm（）
}
/**
*添加新体验
*/
addNewExperience（）{
this.experienceService.addExperience（this.addForm.value）
.订阅(
res=>{
如果（res）{
喷火({
标题：“伟大”，
图标：“成功”，
html:
“您的经验已添加！”，
confirmButtonAriaLabel:“Ok”，
});
this.submitted=true；
this.modal.close（）
}
},
err=>Swal.fire({
标题：“哎呀！”，
图标：“错误”，
html:
'结束日期必须大于开始日期'，
confirmButtonAriaLabel:“Ok”，
}),
)
}
获取addExperienceData（）{
返回this.addForm.controls；
}
私有setExperienceForm（）{
this.addForm=this.formBuilder.group({
poste:[this.newExperience.poste，Validators.required]，
企业：[this.newExperience.enterprise，Validators.required]，
VILE:[this.newExperience.ville，Validators.required]，
DateDunch:[this.newExperience.DateDunch，Validators.required]，
dateFin:[this.newExperience.dateFin，Validators.required]，
详细信息：[this.newExperience.details，Validators.required]
});
}
}

为了澄清，添加体验组件被用作模式

下面是我的页面的外观：

你知道怎么做吗

谢谢：）

解决方案：

在寻找解决方案一天后，我在我的体验组件中编辑了函数addExperience（），现在看起来是这样的：

addExperience(experienceModel : Experience){
    const ref = this.modalService.open(AddExperienceComponent, { centered: true });
    ref.componentInstance.selectedExperience = experienceModel;

    ref.result.then((yes) => {
      console.log(yes);
      this.setExperienceList();
    },
      (cancel) => {
        console.log(cancel);
      })
  }

我创建了一个新函数，其中包含ngOnInit（）中的代码，如下所示：

ngOnInit(): void {
    this.setExperienceList();
  }

  /**
   * Get experiences
   */
  private setExperienceList() {
    this.experienceService.getExperiences().subscribe(x => {
      this.experience = x;
    })

谢谢大家的帮助：）

试试这样，我有类似的工作流程，我做到了。在

Experience.component.ts

中，您从

experienceService

getExperiences（）

，我相信这会从API返回JSON或其他内容。在下面，您可以收听对JSON的任何更改，下面是一个可能适合您的简单代码

Experience.component.ts

内部构造函数或

ngOnInit

添加此代码

this.experienceService.listen().subscribe((experiences: any) => {
      this.getListExperiences();
    });

然后在构造函数外部添加此代码

getListExperiences(){
    this.experienceService.getExperiences().subscribe(
      result => this.experience = result
 )}

在

experienceService

中，您可以使用行为主体和可观察对象

  private _listeners = new Subject<any>();
  listen(): Observable<any> {
    return this._listeners.asObservable();
  }

private\u监听器=新主题（）；
listen（）：可观察的{
返回此项。_listeners.asObservable（）；
}