如何在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. 如果是，则从 orders 数组中获取对应的 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 将在找到第一个匹配项时停止。这就是我们使用两个函数来检查和抓取数据的原因。