2 열과 행이 정렬 된 각도 ngFor

Question

저는 Angular5 앱이 있으며 2 열로 표시하려는 문자열 배열을 가지고 있습니다. 나는 다음과 같은 코드가이 문자열이 너무 긴하지만 경우, 작동

<div *ngFor="let singleItem of sevices;> 
    <div style="width: 45%; float: left;background-color:red"> 
     {{singleItem}}    
    </div>   
</div> 

을,이 행의 왼쪽에 빈 열 모양을 일으킬 수 있습니다. 왼쪽과 오른쪽 열을 한 행에 표시하고 각 열의 꼭대기를 정렬 할 수 있어야합니다. 어떤 아이디어가 이것을 어떻게?

Answer 1

은 text-overflow: ellipsis 속성을 사용합니다.

<div *ngFor="let singleItem of sevices;> 
    <div 
     style="width: 45%; 
     float: left; 
     background-color:red 
     white-space: nowrap; 
     overflow:hidden !important; 
     text-overflow: ellipsis;"> 

     {{singleItem}}    
    </div>   
</div> 

Answer 2

부트 스트랩 클래스는 앱에 포함시킨 경우 사용할 수 있습니다.

<div class="row" *ngFor="let singleItem of sevices;let i = index;> 
 
    <div class="col-md-6" class="left-style" *ngIf="i%2 == 0"> 
 
     {{singleItem}}    
 
    </div> 
 
    <div class="col-md-6" class="right-style" *ngIf="i%2 != 0"> 
 
     {{singleItem}}    
 
    </div> 
 
</div>

이제 내지 컬럼-MD-6에 주어진 클래스에 스타일을 추가 할 수 있습니다 div의

Answer 3

간단한 솔루션은 CSS 클래스를 추가했다 "열 수 : 2;" 내 외부 div.