изменения в служебной переменной, не влияющие на компонент - PullRequest
Новая
       50

изменения в служебной переменной, не влияющие на компонент

1 голос
/ 04 мая 2020

У меня есть массив в моей serviceA, и я добавляю данные в этот массив в componentA и удаляю данные из этого массива в componentB (это entryComponent). Я хотел всегда знать текущую длину массива от componentA. Я создал переменную и событие в serviceA, которое обновляет длину переменной после вызова addData (метод службы) из componentA, а также после удаления removeData (метод службы) из componentB. Однако когда я вызываю addData, я вижу, что мой componentA получает обновленную длину массива, но когда я вызываю removeData из componentB, componentA не получает обновленную длину массива. Может кто-нибудь помочь мне, что здесь не так.

Сервисный код: 

      @Injectable()
      export class serviceA implements OnInit {
      public totalCurrentLength = 0;
      public dataArray = [];
      dataArrayChanged: Subject<any> = new Subject<any>();

      constructor(){
      this.dataArrayChanged.subscribe((value) => {
       this.totalCurrentLength = value;
      })       
    }

    addData(data){
     this.dataArray.push(data);
     this.dataArrayChanged.next(this.dataArray.length); 
    }

     removeData(index){
     this.dataArray.splice(index, 1);
     this.dataArrayChanged.next(this.dataArray.length); 
    }        

}

componentA: 

    export class componentA implements OnInit {
    public currentArrayTotal = 0;
    constructor(
    serviceAObj:serviceA){}
    this.addData(data){
      this.serviceAObj.addData(data);
      this.currentArrayTotal = this.serviceAObj.totalCurrentLength;
    } 
}

ComponentB: 

 export class componentB implements OnInit {
    constructor(
    serviceAObj:serviceA){}
    this.removData(index){
      this.serviceAObj.removeData(index);
    } 
}

1 Ответ

0 голосов
/ 04 мая 2020

Я думаю, что происходит то, что this.serviceAObj.addData(data); выполняется, что запускает событие.

Затем перед тем, как слушатель этого события this.dataArrayChanged.subscribe(... сможет обновить значение serviceAObj.currentArrayTotal, значение установлено

this.currentArrayTotal = this.serviceAObj.totalCurrentLength;

Таким образом, между этими двумя линиями возникает состояние гонки: 

this.serviceAObj.addData(data);
this.currentArrayTotal = this.serviceAObj.totalCurrentLength;

«Реактивный» подход к этой проблеме - разоблачить Subject в ServiceAObj и прослушайте его в ComponentA.

...