2017-08-03 76 views
1

我試圖按照以下方式在條件基礎上設置組件的樣式。角度組件的條件樣式

<div class="col-md-3 d-flex justify-content-center align-items-center" ng-style ="{ ' background-color' : (vars.state=='Signup')? '#73c7af' : '#ffffff' }"> 

and my vars.state = Signup。所以根據這個div的背景應該是#73c7af,但它仍然是白色的。有人可以告訴我我錯在哪裏嗎?

+0

POST變量 – Sreemat

+0

的含量這些都是瓦爾 瓦爾= { 狀態: '' }; signupData = { 名: '', 電子郵件: '', father_husband: '', 地址: '', CNIC: '', cnincpath: '' }; signatureData = { 名: '', signatureurl: '' } 驗證= { 代碼:{ digit1: '', digit2: '', digit3: '', digit4: '', }, 標題: '', 消息:{ 頂部: '', 底部: '' }, 按鈕: '下一步' } 而且我設置狀態設置爲 '在構造函數中註冊'。 –

+1

angular的語法是'[ngStyle] =「...」' –

回答

2

ng-style是AngularJS的語法。對於Angular 2+,使用[ngStyle]=""語法。

<div class="col-md-3 d-flex justify-content-center align-items-center" [ngStyle]="{ 'background-color' : (vars.state=='Signup')? '#73c7af' : '#ffffff' }"> 
+1

刪除'background-color'之前的尾部空格,並且您的解決方案應該可以工作。 – Faisal

+1

謝謝@Faisal。更新了我的答案。 –

1

您可以使用style.propertyName來設置任何條件樣式屬性。

<div class="col-md-3 d-flex justify-content-center align-items-center" [style.background]="someFunction()">