如何在角度组件类中迭代 [object Object]答案

【问题标题】：how to itrate over [object Object] in angular component class如何在角度组件类中迭代 [object Object]
【发布时间】：2019-12-31 06:47:53
【问题描述】：

我想将服务 API 数据放入组件类并在发送到 html 之前操作数据。下面是我的组件类代码，

  discountlists:Autodiscount;
  filterdata:any;

onChangeCountry(id: string){
  if(id == 'none'){
    alert("No Code Selected");
  }else if(id != null || id != ''){
    this.filterdata = this.autopostService.getDiscountSchemesById(id).subscribe(
      (data) => this.discountlists = data,
      error => this.error = error
    );
    alert(this.filterdata);
  }
}

在这里，我将值存储在任何类型的 filterdata 中，并且我从服务 api 获取值，如下所示，

{
   "discount_id": "1",
   "discount_code": "SAVE20",
   "discount_price": "10%",
   "start_discount_date": "2019-12-17T00:00:00.000+0000",
   "end_discount_date": "2019-12-30T05:10:45.680+0000",
   "discount_on_car": true,
   "discount_on_part": false,
   "discount_on_All": false,
   "discount_on_cars": [
       "Nissan"
   ],
   "discount_on_parts": [
       ""
   ]
}

上面的值被转换成一个类文件discountlists:Autodiscount; 我想从上面的值执行一些操作，然后我想将该值显示到 html 中。当我在 [object Object] 中获取值时，如何将其转换为字符串？

【问题讨论】：

你想展示什么？
难道你不能像这样使用 this.discountlists.discount_price = 20% 来操纵吗？
实际上我想使用“discount_price”的值执行算术运算：“10%”。
不，我不想更新我希望值执行操作
stackoverflow.com/questions/41396435/…

标签： javascript angular angular7

【解决方案1】：

要获取值，首先通过this.data.discount_price访问属性，要获取数字，替换字符%，然后使用parseFloat将其转换为数字

试试这样：

let discountPercent = parseFloat(this.data.discount_price.replace("%", ""));

Working Demo

【讨论】：

仍未定义
Number() 不会将非数字值转换为数字。您可以改用parseFloat()。见：stackoverflow.com/a/13676265/1331040
@nilay 你能看一下演示吗？您的数据格式是否相同？
是的，演示工作正常，但在我的项目中不起作用。有没有办法直接转换价值是 Autodiscount 类并在组件类中使用折扣列表来获取数据？
你能在stackbiltz中分享你的代码吗？我猜你的数据格式不一样

【解决方案2】：

修改您的 this.discountlists 对象（执行算术运算），以便可以在 HTML 中访问它

onChangeCountry(id: string){
  if (id == 'none') {
    alert("No Code Selected");
  } else if (id != null || id != '') {
    this.filterdata = this.autopostService.getDiscountSchemesById(id).subscribe(
      (data) => {
        this.discountlists = data;
        this.discountlists.discount_price = parseFloat(data.discount_price.replace('%', ''));
      },
      error => this.error = error
    );
    alert(this.filterdata);
  }
}

【讨论】：

【解决方案3】：

您可以通过以下方式执行此操作：

discountlists:AutoDiscount;

  filterData:any; // you can also use the model instead of any like:
// Define this under Core part, you can create a interfaces folder there and use it via adding reference to common file i.e index.ts
    export interface AutoDiscount{
      discount_id: number
      discount_code: string;
      discount_price: string;
      start_discount_date: string;
      end_discount_date: string;
      discount_on_car: boolean;
      discount_on_part: boolean;
      discount_on_All: boolean;
      discount_on_cars: Cars[];
      discount_on_parts: Parts[];
    }

    export interface Cars
    {
      Name: string;
    }

    export interface Parts
    {
      Name: string;
    }

then filterData: AutoDiscount;

    onChangeCountry(id: string){
      if(id == 'none'){
        alert("No Code Selected");
      }else if(id != null || id != ''){
        this.autopostService.getDiscountSchemesById(id).subscribe(
        (result: any) => {
          if (result.items.length) {
// Define another method in autopostService i.e formatItems to format the items of result object. You can create a business logic as per your requirement to change/update the existing JSON detail
this.filterdata = this.autopostService.formatItems(result); 
}
 });    
}

无需创建两个不同的对象来过滤数据，即 discountlists:Autodiscount;您可以使用 filterData 或 discountLists 一个对象来执行/操作数据

【讨论】：