【问题标题】:Not able to iterate over interface. Looping variable resulting in undefined无法迭代接口。循环变量导致未定义
【发布时间】:2019-11-21 14:00:12
【问题描述】:

在我的示例中,我创建了一个名为 product 的接口并将数据推送到其中。为此,我创建了一个总函数,它将来自两个来源的数据组合起来并推送到接口对象中。但是当我迭代它时,循环变量变得未定义。 在我遍历购物车变量时,在 total() 函数中,p 的值是未定义的。知道为什么吗?

提前谢谢你 .ts

  import { stocks } from '../../class-objects/stocks'


    export interface Product {

      product_id : number;
      name : string;
      image_url : string;
      margin : number;
      gst : number;
      description : string;
      date : Date;
      sub_id : number;
      unit : string;
      quantity : number;
      stocks : stocks [] 

    }

    export class ItemsPage implements OnInit {

      myListObject = [] as Array<Product>

      @ViewChild('cart', {static: false, read: ElementRef})fab: ElementRef;

      constructor(private cartService: CartService, private modalCtrl: ModalController, public productService : ProductService) { }


      ngOnInit() {

        this.cartService.getProductDetails().subscribe(data =>{
          this.products = data;
          this.filter_products = this.products;

          console.log(this.products)
        })
        this.cart = this.cartService.getCart();
        this.cartItemCount = this.cartService.getCartItemCount();
      }

      onChange(quantity,product) { // quantity coming from select from html

        this.selected_quant  = quantity;
      }

      addToCart(product) {

        this.total(product,this.selected_quant)

      }


      total(product,quantity) {

        console.log(this.cart)

        for(let p of this.cart ) {
          console.log("Value of p="+p) // resulting in undefined

          console.log(p.image_url)  // resulting in undefined
          console.log(p.name) // resulting in undefined
          console.log(product.product_id)

          if(p.product_id === product.product_id){
            p.quantity = product.quantity
        }
        else {

          this.myListObject.push(product,quantity)
            console.log(this.myListObject)
          this.cartService.addProduct(this.myListObject);
          this.animateCSS('tada');
        }
      }

        }
      }

cartservice.ts

  private cart = [];
  private cartItemCount = new BehaviorSubject(0);


  constructor(private http: HttpClient) { }

  getProductDetails (): Observable<any[]> {
    return this.http.get<any[]>('http://[::1]:3000/products?&filter[include][][relation]=stocks')

  }

     getCart() {
        return this.cart;
      }

      getCartItemCount() {
        return this.cartItemCount;
      }

      addProduct(product) {
        let added = false;
        for (let p of this.cart) {
          console.log("cartservice " +p) // resulting in undefined 
          if (p.product_id === product.product_id) {
            p.quantity = product.quantity;

            added = true;
            break;
          }
        }
        if (!added) {
          this.cart.push(product);
        }
        this.cartItemCount.next(this.cartItemCount.value + 1);
      }

【问题讨论】:

  • 向我们展示您进行迭代的 html 代码
  • 打字稿中的迭代。在for(let p of this.cart)的总函数中,p的值是未定义的
  • 啊,好吧,你需要把你所有的服务!
  • 我已经上传了服务。即使在 addproduct() 函数中使用,循环变量也是未定义的
  • 在 addToCart() 中调用了总方法,但在您发布的代码中从未调用过 addToCart。

标签: javascript angular typescript for-loop ionic4


【解决方案1】:

替换total函数。

total(product, quantity) {
  console.log(this.cartService.getCart());

  for (let p of this.cartService.getCart()) {
    console.log("Value of p=" + p); // resulting in undefined

    console.log(p.image_url); // resulting in undefined
    console.log(p.name); // resulting in undefined
    console.log(product.product_id);

    if (p.product_id === product.product_id) {
      p.quantity = product.quantity;
    } else {
      this.myListObject.push(product, quantity);
      console.log(this.myListObject);
      this.cartService.addProduct(this.myListObject);
      this.animateCSS("tada");
    }
  }
}

【讨论】:

  • 当然,我有服务中的类和构造函数。问题出在这一行项目页面中的 total() 函数 - for(let p of this.cart ) { console.log("Value of p="+p) // 导致 undefined p 的值返回 undefined .这是我说的问题
  • 那么下一次,提供所有的代码,而不仅仅是会让人迷惑的部分。检查我的编辑。 @pratikjaiswal
猜你喜欢
  • 2017-05-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-05-01
  • 2013-01-01
相关资源
最近更新 更多