यहाँ मेरे एचटीएमएल का एक हिस्सा है:

<div class="container"> 

और यहाँ संबंधित सीएसएस हिस्सा है:

.container{
width:100%;
height: 45px;}

@media (min-width: 768px) { 
.container{
height:60px;}

अब मैं इस div की शैली को ngStyle द्वारा किसी संपत्ति से बांधना चाहता हूं। मेरे पास app.component.ts में एक संपत्ति है जिसे isShrinked कहा जाता है, और जब isShrinked===true, मैं चाहता हूं कि div की ऊंचाई 10px हो, अन्यथा ऊंचाई सीएसएस शैली द्वारा निर्धारित डिफ़ॉल्ट मान होगी container वर्ग का।

अब मैंने ngStyle के बारे में एंगुलर डॉक्यूमेंटेशन पढ़ा लेकिन मुझे इसे हासिल करने के लिए सही सिंटैक्स नहीं मिल रहा है . मैं जो सबसे करीब कर सकता हूं वह है [ngStyle]="{'height': isShrinked?'10px':''}" जैसे कुछ जोड़कर लेकिन यह स्पष्ट रूप से काम नहीं करता है क्योंकि मुझे इस टर्नरी अभिव्यक्ति में दाईं ओर एक मूल्य देना होगा, जो कि मैं नहीं करना चाहता हूं।

क्या कोई मेरी मदद कर सकता है?

2
Eddie Lin 10 जुलाई 2018, 05:13

1 उत्तर

सबसे बढ़िया उत्तर

निम्नलिखित वाक्यविन्यास काम करना चाहिए:

[ngStyle]="isShrinked ? { 'height': '10px' } : {}"
[ngStyle]="isShrinked ? { 'height': '10px' } : null"

यदि केवल एक शैली विशेषता सेट की जानी है, तो इस विशिष्ट शैली बंधन के साथ समान परिणाम प्राप्त किया जा सकता है:

[style.height.px]="isShrinked ? 10 : null"

डेमो के लिए यह स्टैकब्लिट्ज देखें।

4
ConnorsFan 10 जुलाई 2018, 06:13