Question

我想将服务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);
  }
}

在这里，我将值存储在类型为any的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。当我在[对象对象]中获取值时，如何将其转换为字符串？

Answer 1

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

尝试这样：

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

Working Demo

Answer 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);
  }
}

Answer 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); 
}
 });    
}

无需创建两个不同的对象来过滤数据，即折扣列表：自动折扣；您可以使用一个对象filterData或discountLists来执行/操作数据

如何在角度组件类中对[object Object]求值

3 个答案: