Wie erreiche ich die folgende Operation in Angular2?

Question

Ich habe drei Arrays:

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

---

Ich möchte:

1. Liste aller Tabellen, die von deren Anzahl.
2. Überprüfen Sie, ob die Tabelle Aufträge enthält, d. H. Table_id existiert in orders Array.
3. Wenn dies der Fall ist, erhalten Sie die entsprechende food_id aus Orders Array und zeigen Sie die food name.

Etwas wie folgt:

---

<!-- !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> 

Ich habe gerade gelesen, dass die neue ECMAScript 2016 eine includes Methode für Arrays enthält:

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

Aber ich weiß nicht, wie man Implementiere es in meinem Fall mit Objekten als Elementen. Was wäre der beste Ansatz dafür?

Answer 1

Sie können stattdessen find und filterincludes verwenden.

Erstellen Sie eine Funktion, die, wenn der Tabellenreihenfolge hat überprüft:

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

Und verwenden Sie hier:

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

Danach müssen Sie alle Aufträge greifen, angezeigt werden Sie eine andere Funktion erstellen können dass bekommen die Aufträge wie:

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

Und verwenden Sie hier:

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

die Nahrungsmittelnamen erhalten:

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

Und hier verwenden:

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

Auf diese Weise kann nicht nutzlos Prozess tun.

Filter wird über das Array bis zum Ende iterieren und find wird gestoppt, wenn das erste Vorkommen gefunden wird. Aus diesem Grund verwenden wir zwei Funktionen, um die Daten zu prüfen und zu erfassen.