Angular 角度：如何传递后端数据，在ngfor中单击特定组件

我使用ngfor循环一个组件，因此它有n个组件

每个组件都有几个属性，其中一个属性（昵称）将通过调用服务、获取响应并在组件内部传递来发送组件的onclick

现在，当我像这样传递时，我为我单击的组件得到的响应被所有ngfor组件使用。我希望它被我单击的组件使用

<company *ngFor="let company of customerGroup; trackBy: trackByItems" [nickNames]="nickNames | async" [company]="company" (click)="fetchNickNames(company.debtorId)"></company>

组件代码：

  nickNames: Observable<NickName[]>;

  ngOnInit(): void {
    this.sharedDataService.customerGroup.subscribe(customerGroup => {
      this.customerGroup = customerGroup;
    });

    this.nickNames = this.sharedDataService.nickNames;
    this.sharedDataService.showNicknameModal.subscribe((data) => this.showNickNamePopUp = data.show)
  }

  fetchNickNames(debtorId,parentShadowDebtorIds,shadowDebtorIds): void {
    const debtorIds = [debtorId];
    this.creditOverviewService.fetchFacilitiesNickNames(this.customerGroup.id, debtorIds).subscribe(
      (nickNameResponse) => this.sharedDataService.changeNickNames(nickNameResponse));
  }

昵称：可见；
ngOnInit（）：void{
this.sharedDataService.customerGroup.subscribe（customerGroup=>{
this.customerGroup=customerGroup；
});
this.昵称=this.sharedDataService.昵称；
this.sharedDataService.showNicknickModel.subscribe（（数据）=>this.showNicknickPopup=data.show）
}
获取昵称（debtorId、ParentShadowDebtorId、ShadowDebtorId）：无效{
常量债务人ID=[债务人ID]；
this.creditOverviewService.fetchFacilities昵称（this.customerGroup.id，debortorids）。订阅(
（昵称响应）=>this.sharedDataService.Change昵称（昵称响应））；
}

共享数据服务

  private nickNameSource = new ReplaySubject<NickName[]>(1);
  nickNames: Observable<NickName[]> = this.nickNameSource.asObservable();

  changeNickNames(nickName: NickName[]): void {
    this.nickNameSource.next(nickName);
  }

nickNames$: BehaviourSubject<NickName[]>(1); //A BehaviourSubject to get the latest value.
nickNamesArray: Observable<NickName[]>[]; //Observable for each company in CustomerGroup

  ngOnInit(): void {
    this.sharedDataService.customerGroup.subscribe(customerGroup => {
      this.customerGroup = customerGroup;
      nickNamesArray = []; //create a new instance for each company in CustomerGroup 
      for(let i=0; i<customerGroup.length; i++){
        nickNamesArray.push(new Observable<NickName[]>());
      }  
    });

    this.sharedDataService.nickNames.subscribe(res => nickNames$.next(res)); //BehaviourSubject subscribed to nickName Observable
    this.sharedDataService.showNicknameModal.subscribe((data) => this.showNickNamePopUp = data.show);
  }

  fetchNickNames(index,debtorId,parentShadowDebtorIds,shadowDebtorIds): void {
    //index parameter is to update company component (with respective index property)
    const debtorIds = [debtorId];
    this.creditOverviewService.fetchFacilitiesNickNames(this.customerGroup.id, debtorIds).subscribe(
      (nickNameResponse) => {
        this.sharedDataService.changeNickNames(nickNameResponse));
        nickNamesArray[index].next(nickNames$.getValue());
      }
    )
  }

@Input() nickNames: Observable<NickName[]>
@Input() index: number
@Output() updateCompany: new EventEmitter<number>();

  getNickNames(): void{
    this.updateCompany.emit(index);
  } 

private昵称源=新的ReplaySubject（1）；
昵称：Observable=this.昵称源.asObservable（）；
更改昵称（昵称：昵称[]）：无效{
this.昵称源.next（昵称）；
}

---

尝试了不同的可能性，但到目前为止没有成功。

尝试订阅昵称，这样当发生更改时，它将更新视图

NickName[] nicknameView = [] as [];

ngOnInit() {
// other code ..
// subscribe nicknameView  with nickname observerable
this.sharedDataService.nickNames.subscribe(data => {
            this.nicknameView = data;
        });
}

如果您需要更新您单击的特定组件，您可以对昵称使用双向绑定，并在单击组件时对其进行更新，而不是将其作为可观察组件

---

希望这能有所帮助。

因为以下代码绑定到每个公司组件的相同可观察到的输入属性昵称

<company *ngFor="let company of customerGroup; trackBy: trackByItems" [nickNames]="nickNames | async" [company]="company (click)="fetchNickNames(company.debtorId)"></company>

获取昵称

向Get昵称添加一个按钮，单击该按钮时会发出事件以获取昵称

公司组成部分代码

  private nickNameSource = new ReplaySubject<NickName[]>(1);
  nickNames: Observable<NickName[]> = this.nickNameSource.asObservable();

  changeNickNames(nickName: NickName[]): void {
    this.nickNameSource.next(nickName);
  }

nickNames$: BehaviourSubject<NickName[]>(1); //A BehaviourSubject to get the latest value.
nickNamesArray: Observable<NickName[]>[]; //Observable for each company in CustomerGroup

  ngOnInit(): void {
    this.sharedDataService.customerGroup.subscribe(customerGroup => {
      this.customerGroup = customerGroup;
      nickNamesArray = []; //create a new instance for each company in CustomerGroup 
      for(let i=0; i<customerGroup.length; i++){
        nickNamesArray.push(new Observable<NickName[]>());
      }  
    });

    this.sharedDataService.nickNames.subscribe(res => nickNames$.next(res)); //BehaviourSubject subscribed to nickName Observable
    this.sharedDataService.showNicknameModal.subscribe((data) => this.showNickNamePopUp = data.show);
  }

  fetchNickNames(index,debtorId,parentShadowDebtorIds,shadowDebtorIds): void {
    //index parameter is to update company component (with respective index property)
    const debtorIds = [debtorId];
    this.creditOverviewService.fetchFacilitiesNickNames(this.customerGroup.id, debtorIds).subscribe(
      (nickNameResponse) => {
        this.sharedDataService.changeNickNames(nickNameResponse));
        nickNamesArray[index].next(nickNames$.getValue());
      }
    )
  }

@Input() nickNames: Observable<NickName[]>
@Input() index: number
@Output() updateCompany: new EventEmitter<number>();

  getNickNames(): void{
    this.updateCompany.emit(index);
  } 

@Input（）昵称：可观察
@Input（）索引：number
@Output（）updateCompany:neweventemitter（）；
get昵称（）：void{
this.updateCompany.emit（索引）；
} 

因此，您面临的问题是： 您可能正在使用来自ngFor组件的相同的

sharedDataService

实例。因此，如果重播主题发出新值，则所有其他组件都将更新，因为；他们在听相同的可观察到的东西，即

昵称

在这一点上，我的解决方案是：

创建包含重播主题的映射。在初始化组件时为组件提供密钥

服务：

private nickNameSourcesMap = new Map<string, ReplaySubject<NickNames[]>>();
nickNamesMap$ = new Map<string, Observable<string, Observable<NickNames[]>>();

initialize(key) {
  this.nickNameSourcesMap.set(key, new ReplaySubject<NickNames[]>());
  this.nickNamesMap$.set(key, this.nickNameSourcesMap.get(key).asObservable());
}

changeNickNames(key: string, data: NickName[]) {
   this.nickNameSourcesMap.get(key).next(data);
}

getNickNames(key: string): Observable<NickName[]> {
   return this.nickNamesMap$.get(key);
}

dispose(keys: string[]) {
    //Clear the map values when you are done with the component.
    // use it in ngOnDestroy() of component...
    ...
}

---

因此，要更改数据，您只需使用具有正确键值的change昵称函数。

它正在显示，但响应用于所有ngfor组件。我希望它用于我单击的组件。如果您只需要更新您单击的特定组件，您可以对昵称使用双向绑定，并在单击组件时对其进行更新，而不是使其成为可观察的。