Question

我在分组我的对象时遇到了麻烦，我正在尝试使用ngx-group-by管道，但它似乎无法解决我的问题。

假设数据结构是：每个公司都有它的产品（包含子产品），它的价格; 例如我们的公司是XXX，它销售汽车和摩托车：
产品：TwoWheels，FourWheels
分产品：自行车，摩托车（TwoWheels），汽车（FourWheels）
我正在尝试显示每个SubProduct的价格，并按ProductId对其进行分组这是我的Json：

{
  "id": 1,
  "firstName": "test",
  "lastName": "tast",
  "displayName": "myname",
  "profilePic": "none",
  "location": "mylocation",
  "pricingList": [
    {
      "id": 1,
      "userId": 1,
      "ProductId": 1,
      "subProductId": 1,
      "price": 50,
      "subProduct": {
        "id": 1,
        "ProductId": 1,
        "name": "MotorCycle",
        "treatment": {
          "id": 1,
          "name": "TwoWheels"
        }
      },
      "Product": {
        "id": 1,
        "name": "TwoWheels"
      }
    },
    {
      "id": 2,
      "userId": 1,
      "ProductId": 1,
      "subTreatmentId": 7,
      "price": 50,
      "subProduct": {
        "id": 7,
        "ProductId": 1,
        "name": "bike",
        "Product": {
          "id": 1,
          "name": "TwoWheels"
        }
      },
      "Product": {
        "id": 1,
        "name": "TwoWheels"
      }
    },
    {
      "id": 3,
      "userId": 1,
      "ProductId": 2,
      "subTreatmentId": 8,
      "price": 30,
      "subProduct": {
        "id": 8,
        "treatmentId": 2,
        "name": "Car",
        "Product": {
          "id": 2,
          "name": "FourWheels"
        }
      },
      "Product": {
        "id": 2,
        "name": "FourWheels"
      }
    }
  ]
}

这是我的Ionic 2 / Angular html：

<div *ngFor="let p of User.pricingList | groupBy:p.ProductId">
    <div class="ProductTitle">{{p.Product.name}}</div>
    <div>
        <div class="myClass">Name</div>
        <div class="myClass">Price</div>
    </div>
    <div style="myClass2">
        <div class="myClass">{{p.subProduct.name}}</div>
        <div class="myClass">{{p.price}}</div>
    </div>
</div>

GroupByPipe implementation

Ionic 2（Angular）GroupBy Pipe

0 个答案: