Line up Tabellenspalten mit * ngFor

Question

let readings = { 
    "date" : "2017-07-09", 
    "reading" : [ 
     { "meal" : "Breakfast" }, 
     { "meal" : "Lunch" }, 
     { "meal" : "Dinner" }, 
     { "meal" : "Supper" } 
    ] 
} 
{ 
    "date" : "2017-07-10", 
    "reading" : [ 
     { "meal" : "Lunch" }, 
     { "meal" : "Dinner" }, 
     { "meal" : "Supper" } 
    ] 
} 
{ 
    "date" : "2017-07-11", 
    "reading" : [ 
     { "meal" : "Breakfast" }, 
     { "meal" : "Lunch" } 
    ] 
} 

die oben JSON Da kann jeder die eleganteste Art und Weise beraten, um sicherzustellen, werden alle Spalten in der Tabelle unten in einer Reihe aufstellen? Wie Sie sehen können, gibt es für jede Mahlzeit eine Spalte, aber nicht jedes Objekt enthält jede Mahlzeit.

<table> 
    <thead> 
     <tr> 
     <th>Breakfast</th> 
     <th>Lunch</th> 
     <th>Dinner</th> 
     <th>Supper</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let reading of readings"> 
     <td *ngFor="let item of reading.meal">Yes</td> 
     </tr> 
    </tbody> 
    </table> 

Answer 1

Dank helfen Jungs für die Vorschläge, hoffen, auf diese ändern. Hier ist die Custom-Pipe, mit der ich gegangen bin. Was denken Sie?

@Pipe({ name: 'readings' }) 
export class ReadingsPipe implements PipeTransform { 
    transform(readings: any): any { 
     return meals.map(meal => readings.find(reading => reading.meal === meal.meal)); 
    } 
} 

let meals = [ 
    { "meal" : "Breakfast"}, 
    { "meal" : "Lunch" }, 
    { "meal" : "Dinner" }, 
    { "meal" : "Supper" } 
]; 

Answer 2

Ich denke, dass Sie das nicht tun können, ohne Ihre json zu ändern. Sie können diesen Weg versuchen, wenn Sie möchten. Ändere deinen JSON in dieses Format.

{ 
    "date" : "2017-07-10", 
    "reading" : { 
     "Lunch" : "meal_name", 
     "Dinner" : "meal_name", 
     "Supper" : "meal_name" 
    } 
} 

und Sie Tabelle

<table> 
    <thead> 
     <tr> 
     <th>Breakfast</th> 
     <th>Lunch</th> 
     <th>Dinner</th> 
     <th>Supper</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let read of readings"> 
     <td>{{ read.reading.Breakfast ? 'yes' : 'no'}}</td> 
     <td>{{ read.reading.Lunch ? 'yes' : 'no'}}</td> 
     <td>{{ read.reading.Dinner ? 'yes' : 'no'}}</td> 
     <td>{{ read.reading.Supper ? 'yes' : 'no'}}</td> 
     </tr> 
    </tbody> 
    </table> 

ich das :)