Question

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

Experience.component.ts

export class ExperienceComponent implements OnInit {

  experience: Array<Experience> = [];
  
  constructor(
    private experienceService : ExperienceService,
    private modalService : NgbModal,
    private location : Location,
  ) { }

  ngOnInit(): void {
    this.experienceService.getExperiences().subscribe(
      result => this.experience = result
    )
  }

  /**
   * Add a new experience
   * @param addModel
   */
  addExperience(addModel : Experience){
    const add = this.modalService.open(AddExperienceComponent, { centered: true });
    add.componentInstance.selectedExperience = addModel;
  }

}

添加-experience.component.ts

export class AddExperienceComponent implements OnInit {

  addForm: FormGroup;
  submitted = false;
  experience;

  newExperience : Experience = {
    poste: '',
    entreprise: '',
    ville: '',
    dateDebut: '',
    dateFin: '',
    details: ''
  }
  constructor(
    public modal: NgbActiveModal,
    private experienceService: ExperienceService,
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit(): void {
    this.setExperienceForm()
  }

  /**
   * Add a new experience
   */
   addNewExperience(){
    this.experienceService.addExperience(this.addForm.value)
    .subscribe(
      res => {
        if (res) {
        Swal.fire({
          title: 'Great',
          icon: 'success',
          html:
            'Your experience has been added !',
          confirmButtonAriaLabel: 'Ok',
        });
        this.submitted = true;
        this.modal.close()
      }
    },
      err => Swal.fire({
        title: 'Oooops !',
        icon: 'error',
        html:
          'The end date must be greater than the start date',
        confirmButtonAriaLabel: 'Ok',
      }),
    )
    
  }

  get addExperienceData() { 
    return this.addForm.controls; 
  }

  private setExperienceForm() {    
    this.addForm = this.formBuilder.group({
      poste: [this.newExperience.poste, Validators.required],
      entreprise: [this.newExperience.entreprise, Validators.required],
      ville: [this.newExperience.ville, Validators.required],
      dateDebut: [this.newExperience.dateDebut, Validators.required],
      dateFin: [this.newExperience.dateFin, Validators.required],
      details: [this.newExperience.details, Validators.required]
    });
  }

}

澄清一下，add-experience 组件用作模态。

这是我的页面的样子：Picture

你知道怎么做吗？

谢谢:)

解决方案：

经过一天的寻找解决方案，我在我的体验组件中编辑了函数 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;
    })

谢谢你们的帮助：)

Answer 1

您可以向父组件发出添加的 experience。在 Add-experience.component.ts 中，您应该添加一个 EventEmitter。在 EventEmitter 上，您的父组件 (Experience.component.ts) 可以“订阅”并获取添加的 experience。

我在代码中的话：

添加-experience.component.ts

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

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

Experience.component.ts

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

当然你需要在发射器上“订阅”。

Experience.component.ts

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

请记住，这只是一个想法。我不知道你的代码到底长什么样。 Sharing data between child and parent directives and components

Answer 2

尝试这样的事情，我有类似的工作流程，我做到了。在 Experience.component.ts，您从 getExperiences() 订阅 experienceService，我相信这会从 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();
  }

Answer 3

所以在我检查您的代码后，您使用的是 Ngbmodal。在那个解决方案上，我的想法并不好。

在add-new-experience 组件中，您需要dismiss 使用创建的体验来创建模态。在我的示例中，我将表单值发送到另一个组件，但您应该创建一个 experience 对象。

 addNewExperience(experience) {
    // Create the object
    this.newExperience.company = this.addForm.get('company').value;
    this.newExperience.poste = this.addForm.get('poste').value;
    this.newExperience.city = this.addForm.get('city').value;
    this.newExperience.startDate = this.addForm.get('startDate').value;
    this.newExperience.endDate = this.addForm.get('endDate').value;
    this.newExperience.details = this.addForm.get('details').value;

    this.modal.close(this.newExperience);
}

在体验组件中，您需要从封闭模式接收结果。

 addExperience() {
    const add = this.modalService
      .open(AddExperienceComponent, {
        centered: true
      })
      .result.then(
        (result: Experience) => {
         this.experience.push(result);
        },
        reason => {
          console.log(reason);
        }
      );
  }

添加项目后刷新项目列表

3 个答案: