Невозможно прочитать свойство '1' неопределенного угла 7

Question

Я делаю компонент корзины в angular. Я использовал HttpClient для получения данных с локального сервера и сохранял их в массиве products. Я использовал * ngFor для отображения данных в html-файле. Данные отображаются корректно в html, но когда я пытался получить к ним доступ в файле компонента для вычисления общего количества корзин, это выдает мне эту ошибку.

Отображается корзина и ошибка

Вот код:

.html

<div class="container-fluid">
  <div class="card shopping-cart">
        <div class="card-header bg-dark text-light row">
           <div class="col-sm-6">
             <i class="fa fa-shopping-cart"></i>
            Shopping cart
          </div> 
          <div class="col-sm-6">
            <div class="justR">
                <a href="" class="btn btn-outline-info btn-sm pull-right ">Continue shopping</a>
              <div class="clearfix"></div>
            </div>

          </div>

        </div>
        <div class="card-body">
                <!-- PRODUCT -->
                <div *ngFor="let product of products;index as i">
                        <div class="row">
                                <div class="col-12 col-sm-12 col-md-2 text-center">
                                        <img class="img-responsive" src="{{product.prodUrl}}" alt="prewiew" width="120" height="80">
                                </div>
                                <div class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
                                    <h4 class="product-name"><strong>{{product.prodName}}</strong></h4>
                                    <h4>
                                        <small>{{product.prodDescription}}</small>
                                    </h4>
                                </div>
                                <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
                                    <div class="col-3 col-sm-3 col-md-6 text-md-right" style="padding-top: 5px">
                                        <h6><strong>₹{{product.prodPrice}} <span class="text-muted">x</span></strong></h6>
                                    </div>
                                    <div class="col-4 col-sm-4 col-md-4">
                                        <div class="quantity">
                                            <input type="number" [(ngModel)]="products[i].prodQuantity" step="1" max="99" min="1" value="{{products[i].prodQuantity}}" title="Qty" class="qty" size="4">

                                        </div>

                                    </div>
                                    <div class="col-2 col-sm-2 col-md-2 text-right">
                                        <button type="button" class="btn btn-outline-danger btn-xs">
                                            <i class="fa fa-trash" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <hr>


                </div>


        <div class="justR">
        <div class="pull-right">
                <a (click)="updateCart()" class="btn btn-outline-secondary pull-right">
                    Update shopping cart
                </a>
            </div>
 </div>
        </div>
        <div class="card-footer">
          <div class="justR" style="margin: 10px">
            <a href="" class="btn btn-success pull-right">Checkout</a>
            <div class="pull-right" style="margin: 5px">
             Total price: <b>{{total}}</b>
             </div>
          </div>
        </div>
    </div>        

.ts файл:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Cart } from 'src/app/cart/cartInterface';
import { RegisterService} from 'src/app/register.service';

 @Component({
 selector: 'app-cart',
 templateUrl: './cart.component.html',
 styleUrls: ['./cart.component.css']
 })


 export class CartComponent implements OnInit {

private url='http://localhost:3000/getcdata';
public products:Cart[];
errorMessage = '';
total:number;
constructor(private http:HttpClient,private registerService:RegisterService) 
{}



ngOnInit()
{
  this.http.get<Cart[]>(this.url).subscribe(res => {
  this.products = res;
  },
  error => console.error(error));
  this.total=getTotal(this.products);
  console.log(this.products[1].prodName);
}

updateCart()
{
    this.registerService.update(this.products)
    .subscribe(
    (      data: { message: string; }) => { console.log(data.message)},
    (      error: { statusText: string; }) => this.errorMessage = 
    error.statusText,     
    );
 }

}

 function getTotal(items:Cart[])
 {
   var total:number;
   var i=0;
   for(var item in items)
    {
     total=total+(items[i].prodPrice*items[i].prodQuantity);
     i++;
    }
  return total;
  }

Answer 1

Попробуйте переместить другие вещи из ngOnInit в обратный вызов, как это:

    this.http.get<Cart[]>(this.url)
      .subscribe(res => {
        // This is called asynchronously when you get the response 
        this.products = res;
        this.total = getTotal(this.products);
        console.log(this.products[1].prodName);
      }, error => console.error(error));

Answer 2

Полагаю, console.log(this.products[1].prodName); - это строка с ошибкой.Ваш this.http.get<Cart[]>(this.url) происходит асинхронно и будет запускать код после него перед запуском обратных вызовов внутри subscribe.Сетевые запросы (и другие асинхронные вещи) занимают время, и JavaScript был разработан для обработки асинхронных вещей, добавляя их в цикл обработки событий, который будет выполняться позже, когда они завершатся, и не блокирует выполнение остального кода.

Так что this.total=getTotal(this.products); и console.log(this.products[1].prodName); запускаются до запуска this.products = res;, в результате чего this.products остается пустым массивом, когда вы пытаетесь прочитать второй элемент из него.

Читаем о том, какасинхронная работа работает в JavaScript и то, как Promises, async / await и / или Observables могут быть использованы для обработки асинхронных вещей, может быть полезно (похоже, что Angular сильно зависит от Observables).Поначалу это может немного сбивать с толку, но вы привыкли обрабатывать асинхронные вещи.