Question

问题

我无法刷新变量，因此在club-list-component中创建俱乐部后，在create-club-component中选择了下拉列表

上下文：

我正在开发一种应用程序，可以从俱乐部中的团队中随机选择一个人。首先，我制作了一个组件，该组件总结了所有功能，但是由于这很丑陋，我想将不同的组件和功能分开。

我尝试过的事情：

如果所有代码都包含在1个组件中，则我已经测试了功能，并且创建俱乐部后下拉框会刷新。

代码段

我有以下几段代码可供共享（为了便于阅读，有些代码被遗忘了）：

create-club.component.ts：

 @Input() clubDetails = {name: ''};

createClub() {
    this._clubService.createClub(this.clubDetails).subscribe((data: {}) => {
    });
    alert('Club Created');
  }

club-list.component.ts：

  public clubs = [];

  ngOnInit() {
    this.refreshClublist();
  }

  refreshClublist() {
    this._clubService.getClubs().subscribe(data => this.clubs = data);
  }
}

club-list.component.html

<div>
  <div class="alert alert-primary">
    Select a club from the list
  </div>
  <select class="form-control">
    <option *ngFor="let club of clubs" [value]="club.id">
      {{club.name}}
    </option>
  </select>
</div>

我该如何归档： 从create-club.component.html的弹出模式创建俱乐部后，我想刷新club-list.component.html的下拉框

在我看来，最好的情况是：

[club-list-component] ngOnInit（refreshClublist（））{}
[create-club.component] createClub（）
[club-list-component] refreshClublist（）（在第2步中的createClub（）之后调用）

Answer 1

您可以使用Observable BehaviorSubject

实现此目的

create-club.component.ts：

private clubList = new BehaviorSubject(null);
public clubList$ = this.clubList.asObservable();

createClub() {
    this._clubService.createClub(this.clubDetails).subscribe((data: {}) => {
       this.clubList.next(data);
    });
    alert('Club Created');
}

club-list-component：

ngOnInit(){
  this.clubList$.subscribe(updatedList=>{
    console.log(updatedList);
  });
}

从另一个组件调用方法以保持数据同步

1 个答案: