arrays - rxjs/Angular2 ループしますが、単一の連想配列の異なるオブジェクトを表示します

Question

最近、rxjsを使用して2つの配列を結合しました

  MyArray =  [{
        "Field": ["Cars"],
        "Type": ["BMW", "Toyota", "Volvo"]
          },
         {
        "Field": ["House"],
        "Type": ["Condominium", "TownHouse"],
         }


   PriceArray = [
             {
            field: Cars,
            distribution: [{"name" : "BMW","price":2},{"name" : "Toyota","price":3}]
            },
            {
            field: People,
            distribution: [{"name" : "Condominium","price":3},{"name" : "TownHouse","price":2}]
           }]

rxjs フィルターの使用

const $MergeData = MyArray.map(val => {
  return Object.assign({}, val,this.PriceArray.filter(v => v.Field === val.field)[0])
});
 this.mergedArray = $MergeData;

今、それはこのように見えました..

mergedArray =  [{
    "Field": "Cars",
    "Type": ["BMW", "Toyota", "Volvo"],
    "field" : "Cars",
    "distribution" : [ 
        {
         "name" : "BMW"
         "price": 2 ,
        },
        {
         "name" : "Toyota"
         "price": 3 ,
        },
        {
         "name" : "Toyota"
         "price": 4 ,
        }
       ]
    }, .... (house array here)];

次に、アイテムの価格を表示しようとしましたが、機能していません

<div *ngFor="let item of mergedArray">  
    <div *ngFor="let car of item.Field; let i = index"> 
        <p>{{car}} </p>
        <p>{{item.distribution.price[i]}} </p>
    </div>
</div>

配列が代わりにこのように見える場合は、修正または改善を期待しています

mergedArray =  [{
    "Field": "Cars",
     "Type": ["BMW": 2, "Toyota" : 3, "Volvo" : 4],
    }]

ループする方がはるかに簡単なので、それが可能になることを願っています。