javascript - 在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. 检查表是否有订单，即table_id存在于orders数组中。
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 将在找到第一个匹配项时停止。这就是为什么我们使用两个函数来检查和抓取数据。