как хранить и использовать данные, поступающие из сервиса в переменную локального массива компонентов

Question

Я хочу получить данные из службы

   this.admin.cartgrid().subscribe(data => this.add =data);

и сохранить, а затем получить сумму итоговой стоимости ngOnInit () {

    for(let i = 0; i<this.add.length; i++){
      this.sum = this.sum + this.add[i].Final_amt;    
    }
 } 

, но не могу получить сумму. я думаю, что данные не хранятся в локальном массиве добавить.

вот мой файл TS

 export class CartComponent implements OnInit {

    add : cart[];
   sum : number=0

  constructor(private admin:AdminService,) {
   }
 ngOnInit() {
    this.admin.cartgrid().subscribe(data => this.add =data);
    this.buyer= sessionStorage.getItem('key-name');

    for(let i = 0; i<this.add.length; i++){
      this.sum = this.sum + this.add[i].Final_amt;    
    }
 } 

вот мой объект корзины

    export class cart {
    constructor(
       public Cartid:number,
       public Price_month : number,
       public total_month : number, 
       public total_price : number, 
       public buyer : string, 
       public seller : string, 
       public GST_amt : number, 
       public admin_profit : number, 
       public seller_adveriser_amt : number, 
       public Buy_Datetime : Date, 
       public Category : string, 
       public Subcategory : string, 
       public Final_amt : number, 
       public PRDName : string,
       public BYSESSION:string) {

    }
}

Answer 1

Вам необходимо переместить ваши дополнительные логики c в подписные логи c. Поскольку вы подписываетесь на наблюдаемое, которое является асинхронной операцией.

После этого кода вы можете напечатать this.sum, и вы получите результат.

export class CartComponent implements OnInit {

  add: cart[];
  sum: number = 0

  constructor(private admin: AdminService, ) {}
  ngOnInit() {
    console.log('step 1')
    this.admin.cartgrid().subscribe(data => {
    console.log('step 2')
      this.add = data;
      for (let i = 0; i < this.add.length; i++) {
        this.sum = this.sum + this.add[i].Final_amt;
      }
    });
    console.log('step 3')
    this.buyer = sessionStorage.getItem('key-name');
  }
}

ОБНОВЛЕНИЕ

Observables - это оболочка для потока данных, и в вашем случае this.cartgrid() является наблюдаемой, которая является асинхронной. Итак, JavaScript помещает асинхронную задачу в очередь сообщений, когда они возвращают успешный ответ, и не выполняет его сразу после него.

Так что в вашем случае, когда вы писали для l oop вне блока подписки, он выполнялся до того, как данные были возвращены из службы. По этой причине ваша сумма была равна нулю.

Если вы хотите выполнить отладку, вы можете добавить консоли в свой код и проверить последовательность их печати. Я добавил в ваш код, и вывод будет - step1, step3 и step2.

Если вы хотите узнать больше об асинхронном в JavaScript - я бы предложил вам это видео - https://www.youtube.com/watch?v=8aGhZQkoFbQ