Question

我在InMemoryDataService（模拟服务器）和services.ts中有这些json对象，以获取其对象的所有元素（在shop.service.ts等中）。我想显示在html页面中，而不是具有产品和商店的特定ID的productId和shopId，product.name和shop.name。我该怎么办？

 createDb() {
const prices = [
  { id: 11, price: 3.40, dateFrom:'12/3/19', dateTo: '15/3/19', productId: 3,shopId: 4},
  { id: 12, price: 5.40, dateFrom:'6/3/19', dateTo:'22/3/19', productId: 1,shopId: 4}, 
  { id: 13, price: 8.00, dateFrom:'21/3/19', dateTo:'23/4/19', productId: 2,shopId: 2},
  { id: 14, price: 6.30, dateFrom:'17/3/19', dateTo:'23/3/19', productId: 3,shopId: 3},
];

const products = [
  {id:1, name: 'Barilia', description: 'Good Coffee', category :'Espresso', tags:['Coffe','Espresso'], withdrawn: false},
  {id:2, name: 'Nespresso', description: 'Good Coffee', category :'Espresso', tags:['Coffe','Espresso'], withdrawn: false},
  {id:3, name: 'Island', description: 'Good Coffee', category :'Cappuchino', tags:['Coffe','Cappuchino'], withdrawn: false},
  {id:4, name: 'Lavanca', description: 'Good Coffee', category :'Espresso', tags:['Coffe','Espresso'], withdrawn: false}
];

 const shops = [ 
  { id: 1, name: 'Coffee Island',address: 'Agioi Theodwroi 10,Petroupoli,14432', Ing: 30.5 , Iat: 54.44,tags ['Coffee','Espresso'],withdrawn:false},
  { id: 2, name: 'Coffee Bear',address: 'Valsamou 42,Kifisia,14675', Ing: 32.5 , Iat: 60.43,tags:['Coffee','Espresso'], withdrawn:false },
  { id: 3, name: 'Coffee Lab',address: 'Thiseas 10,Marousi,31313', Ing: 29.5 , Iat: 50.44, tags:['Coffee','Espresso'], withdrawn:false },
  { id: 4, name: 'Starbucks',address: 'Kifisias 7,Kifisia,12345', Ing: 27.8 , Iat: 37.9,tags:['Coffee','Espresso'], withdrawn:false  }
];

return {products,prices,shops};

Answer 1

搜索具有ID的产品系列。

const product = products.find(product => product.id === productId)

Answer 2

您可以遍历价格json并添加这样的name属性

添加产品名称和商店名称属性

prices.forEach(x=>{
    x['productName']= products.find(y=>y.id === x.productId).name;
    x['shopName']= shops.find(y=>y.id === x.shopId).name;
});

Answer 3

如果它们是异步加载的，则可以使用getter来获取数据，就像这样

    private prices = [
        { id: 11, price: 3.40, dateFrom: '12/3/19', dateTo: '15/3/19', productId: 3, shopId: 4 },
        { id: 12, price: 5.40, dateFrom: '6/3/19', dateTo: '22/3/19', productId: 1, shopId: 4 },
        { id: 13, price: 8.00, dateFrom: '21/3/19', dateTo: '23/4/19', productId: 2, shopId: 2 },
        { id: 14, price: 6.30, dateFrom: '17/3/19', dateTo: '23/3/19', productId: 3, shopId: 3 },
    ];

    private products = [
        { id: 1, name: 'Barilia', description: 'Good Coffee', category: 'Espresso', tags: ['Coffe', 'Espresso'], withdrawn: false },
        { id: 2, name: 'Nespresso', description: 'Good Coffee', category: 'Espresso', tags: ['Coffe', 'Espresso'], withdrawn: false },
        { id: 3, name: 'Island', description: 'Good Coffee', category: 'Cappuchino', tags: ['Coffe', 'Cappuchino'], withdrawn: false },
        { id: 4, name: 'Lavanca', description: 'Good Coffee', category: 'Espresso', tags: ['Coffe', 'Espresso'], withdrawn: false }
    ];

    private shops = [
        { id: 1, name: 'Coffee Island', address: 'Agioi Theodwroi 10,Petroupoli,14432', Ing: 30.5, Iat: 54.44, tags: ['Coffee', 'Espresso'], withdrawn: false },
        { id: 2, name: 'Coffee Bear', address: 'Valsamou 42,Kifisia,14675', Ing: 32.5, Iat: 60.43, tags: ['Coffee', 'Espresso'], withdrawn: false },
        { id: 3, name: 'Coffee Lab', address: 'Thiseas 10,Marousi,31313', Ing: 29.5, Iat: 50.44, tags: ['Coffee', 'Espresso'], withdrawn: false },
        { id: 4, name: 'Starbucks', address: 'Kifisias 7,Kifisia,12345', Ing: 27.8, Iat: 37.9, tags: ['Coffee', 'Espresso'], withdrawn: false }
    ];

    get data() {
        return this.prices.reduce((sum, item) => {
            return [...sum, {
                ...item,
                shop: this.shops.find((shop) => shop.id === item.shopId),
                product: this.products.find((product) => product.id === item.productId),
            }];
        }, <any>[]);
    }

用另一个数组angular ts中的外部ID连接数组

3 个答案: