Angular 2: Display-Array im Matrix-Format

Question

Ich habe ein 1D-Array (Liste von Personen). Ich möchte sieht diese Daten in einem Matrixformat angezeigt werden in Winkel 2. Das Array wie folgt:

[ 
{Id: 1, FirstName: 'Michael', LastName: 'Jackson'}, 
{Id: 2, FirstName: 'Aamir', LastName: 'Khan'}, 
{Id: 3, FirstName: 'Meg', LastName: 'Ryan'}, 
{Id: 4, FirstName: 'Raj', LastName: 'Kumar'}, 
{Id: 5, FirstName: 'Michael', LastName: 'Jordan'}, 
{Id: 6, FirstName: 'Serena', LastName: 'Williams'}, 
{Id: 7, FirstName: 'Rathi', LastName: 'Agnihotri'}, 
] 

Der Ausgang muss sein:

Michael Jackson     Aamir Khan    Meg Ryan 
Raj Kumar      Michael Jordan   Serena Williams 
Rathi Agnihotri 

Wie kann ich das erreichen?

Answer 1

Ich verwendete Bootstrap List-Inline-Stil, um dies zu erreichen. Außerdem habe ich meine eigenen Medienabfragen so hinzugefügt.

@media screen and (max-width: 400px) { 
 
    .searchedItem { 
 
     width: 94%; 
 
    } 
 
} 
 

 
@media screen and (min-width:401px) and (max-width: 768px) { 
 
    .searchedItem { 
 
     width: 47.5%; 
 
    } 
 
} 
 

 
@media screen and (min-width:769px) and (max-width: 992px) { 
 
    .searchedItem { 
 
     width: 23%; 
 
    } 
 
} 
 

 
@media screen and (min-width:993px) { 
 
    .searchedItem { 
 
     width: 19%; 
 
    } 
 
}