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}
];

我想：

按编号列出所有表格。
检查表是否有订单，即table_id存在于orders数组中。
如果是，请从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

您可以使用fundamental-mode和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将在找到第一个匹配项时停止。这就是我们使用两个函数来检查和获取数据的原因。

如何在Angular2中实现以下操作？

1 个答案: