【问题标题】:Iterate over array of objects in Typescript迭代 Typescript 中的对象数组
【发布时间】:2018-02-23 03:15:52
【问题描述】:

我需要遍历 angular 2 中的对象数组,并限制对象中特定键的字符串长度显示。

 this.productService.loadAllProducts(product).subscribe(data => {
  if (this.authService.checkActiveSession(data)) {
    if (data.success) {
     //console.log(this.product_desc.substring(0,2))
         for(let i=0;i<data.products.length ;i++){  //How to properly iterate here!!
         console.log(data.products[0].product_desc)
      }
      this.source.load(data.products);
     } else {
      console.log('Not binded');
    }
  }

}); }

我需要将 prod_desc 长度限制为(比如说)10 个字符,同时显示我使用过的字符:

例如:

this.product_desc.substring(0,10)

【问题讨论】:

    标签: javascript angular typescript


    【解决方案1】:

    您可以将内置的forEach 函数用于数组。

    像这样:

    //this sets all product descriptions to a max length of 10 characters
    data.products.forEach( (element) => {
        element.product_desc = element.product_desc.substring(0,10);
    });
    

    不过你的版本没有错。它应该看起来更像这样:

    for(let i=0; i<data.products.length; i++){
        console.log(data.products[i].product_desc); //use i instead of 0
    }
    

    【讨论】:

      【解决方案2】:

      在 Typescript 和 ES6 中你也可以使用 for..of:

      for (var product of products) {
           console.log(product.product_desc)
      }
      

      将转码为javascript:

      for (var _i = 0, products_1 = products; _i < products_1.length; _i++) {
          var product = products_1[_i];
          console.log(product.product_desc);
      }
      

      【讨论】:

      • 这个解决方案对我不起作用。我收到一个 TS 错误,提示“'string' 类型上不存在属性 'product_desc'”。 product 变量似乎是字符串类型,无法将其定义为产品?
      • 我刚刚从 Suchivam 复制了假定的对象属性,但当然您只能登录到您的对象上拥有的控制台属性(无论它是什么)。除了检查您尝试完成的工作是否有效之外,控制台的日志记录不提供任何内容。
      • prob 应该让而不是 var。
      • @Wellspring 它在这里也不起作用,即使我的示例中的“产品”清楚地显示为来自 VSCode 的对象列表。
      • 如果您收到type 'string' 错误,请确保您使用的是“of”和not“in”...例如,使用此for (var x of arr) 和不是这个for (var x in arr)
      猜你喜欢
      • 2022-01-05
      • 2019-05-01
      • 1970-01-01
      • 2019-12-31
      • 2021-06-22
      • 1970-01-01
      • 1970-01-01
      • 2013-10-01
      • 2019-05-22
      相关资源
      最近更新 更多