如何在Angular2中實現以下操作？

Question

我有三個數組：

tables = [{number:1},{number:2},{number:3},{number:4}]; 

foods = [ 
    {id:1, name:'Ice Cream'}, 
    {id:2, name:'Pizza'}, 
    {id:1, name:'Hot Dog'}, 
    {id:2, name:'Salad'} 
]; 

orders = [ 
    {table_id: 2, food_id: 3}, 
    {table_id: 4, food_id: 2} 
]; 

---

我想：

1. 列表中的所有表通過它們的數量。
2. 檢查表是否有命令，即orders數組中存在table_id。
3. 如果有，請從訂單數組中獲取相應的food_id並顯示food name。

東西如下：

---

<!-- !INCORRECT SYNTAX --> 
<div *ngFor="let table of tables"> 
    <h1>TABLE #{{table.number}}</h1> 

    <div *ngIf="orders && orders.length > 0 && orders.table_id.includes(table.number)"> 
     <ul *ngFor="let order of orders where(order.table_id == table.number)"> 
      <li>Orders: {{food_name_from(order.food_id) }}</li> 
     </ul> 
    </div> 
</div> 

我剛纔讀了新的ECMAScript 2016包括陣列的includes方法：

[1, 2, 3].includes(2);  // true 
[1, 2, 3].includes(4);  // false 

但我不知道該怎麼在我的情況下用對象作爲元素來實現它。最好的辦法是什麼？

Answer 1

您可以使用find和filter來代替includes。

創建來檢查，如果表中有順序的功能：

hasOrders(table_number){ 
    return this.orders.find((order) => order.table_id == table_number); 
} 

並使用此：

<div *ngIf="hasOrders(table.number)"> // *ngIf will check the length and return false if it is undefined or 0 

之後，你需要抓住所有的訂單顯示，您可以創建另一個功能這得到了訂單，如：

getOrders(table_number){ 
    return this.orders.filter((order) => order.table_id == table_number); 
} 

並使用此：

<ul *ngFor="let order of getOrders(table.number)"> 

要獲得食物的名稱：

food_name_from(food_id){ 
    return (this.foods.find((food) => food.id == food_id)).name; 
} 

並使用此：

<li>Orders: {{food_name_from(order.food_id) }}</li> 

這樣，你不做無用的過程。

Filter將遍歷數組，直到找到第一個匹配項時結束，並且find將停止。這就是爲什麼我們使用兩個函數來檢查和獲取數據。