2017-05-24 23 views
1
index.ts 
bubbles: any [][] = [['80%','Meeting'],['20%','Meeting']] 

index.html 
<div *ngFor="let bubble of bubbles"> 
     <div class="bubble" style="margin-left:{{bubble[0]}};"> 
     </div> 
</div> 

나는 margin-left 스타일로 배열 거품 [0]에서 데이터를 사용하려고합니다.style = "margin-left : {{data}};"을 (를) 얻으려고 시도 중입니다.

for 루프는 그 레이아웃에서 ['80 % ','Meeting ']을 제공하므로 그 배열의 0 요소를 여백 - 왼쪽 스타일로 설정하려고 시도했지만 이것이 작동하지 않습니다. 이 과정을 또 다른 방법으로 할 수 있습니까?

답변

2

style 대신 [ngStyle]을 사용하십시오. 문서 here. 파서 오류 : 식을 결합하는 식의 말 [{ '여백 - 왼쪽에 체인 표현을 포함 할 수 없습니다

@ Pengyy의 answser 외에도
<div class="bubble" [ngStyle]="{'margin-left': bubble[0]}"> 
+0

을 사용할 수 있습니다 ': bubble [0]};] –

+1

@ThomasY 죄송합니다. 표현의 끝에서';'를 제거해야합니다. – Pengyy

+1

@ThomasY는'{ 'attr1': xx, 'attr2': yy}'와 같이 그들을 분할하기 위해','를 사용합니다. – Pengyy

0

, 당신은 또한 내가이 오류가

<div class="bubble" [style.margin-left]="bubble[0]">