[NgStyle] 조건과 결합(그렇지 않은 경우)

[NgStyle] 조건과 결합(그렇지 않은 경우)

나는 NgStyle Documentation For Angular 2를 읽었는데, 그것은 나에게 조금 혼란스럽습니다.요소의 배경 이미지를 설정하기 위해 (만약...그렇지 않다면)와 같은 조건을 가진 NgStyle을 어떻게 사용합니까?

다음과 같은 조건을 사용할 수도 있습니다.

<div [ngStyle]="myBooleanVar && {'color': 'red'}"></div>

문자열 연결이 조금 덜 필요합니다.

의 3 사산용 내에서 사용ngStyle바인딩은 if/binding 조건으로 작동합니다.

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>

이전의 답변들이 저에게 효과가 없었기 때문에 저는 이것을 개선하기로 결정했습니다.

은 함께작야합다니해업과 함께 일해야 .url('')가치가 있는 것이 아닙니다.

<li *ngFor="let item of items">
  <div
    class="img-wrapper"
    [ngStyle]="{'background-image': !item.featured ? 'url(\'images/img1.png\')' : 'url(\'images/img2.png\')'}">
  </div>
</li>

다음과 같이 사용할 수 있습니다.

<div [style.background-image]="value ? 'url(' + imgLink + ')' : 'url(' + defaultLink + ')'"></div>

if 및 other 대소문자를 기준으로 한 [ngStyle].

<label for="file" [ngStyle]="isPreview ? {'cursor': 'default'} : {'cursor': 'pointer'}">Attachment</label>

(만약...else)를 사용하여 배경 이미지가 아닌 다른 것을 설정하는 경우 귄터 쇠흐바우어의 예를 추가하고 단순화하려면:

<p [ngStyle]="value == 10 && { 'font-weight': 'bold' }">

<h2 [ngStyle]="serverStatus == 'Offline'? {'color': 'red'{'color':'green'}">Server with ID: {{serverId}} is {{getServerStatus()}} </h2>

또는 다음과 같은 것을 사용할 수도 있습니다.

<h2 [ngStyle]="{backgroundColor: getColor()}">Server with ID: {{serverId}} is {{getServerStatus()}}</h2>

그리고 *.ts에서.

getColor(){return this.serverStatus === 'Offline' ? 'red' : 'green';}

기존 프로젝트에서 아래 코드를 사용했습니다.

<div class="form-group" [ngStyle]="{'border':isSubmitted && form_data.controls.first_name.errors?'1px solid red':'' }">
</div>

Trying to set background color based on condition:   

Consider variable x with some numeric value.    
<p [ngStyle]="{ backgroundColor: x > 4 ? 'lightblue' : 'transparent' }">
        This is a sample Text
</p>

이것은 'devices'가 유형 번호의 변수인 "let element"의 예입니다.

[ngStyle]="{'background-color': (element.devices >= 31.5) ? ('green') : (element.devices === 23.5) ? ('gold') : ('red')}"

여기에는 두 가지 조건이 있습니다. 만약 장치 >= 31.5가 녹색이면 두 번째 조건인 장치 === 23.5가 금색이고 이것도 거짓이면 빨간색이 됩니다.이와 같은 조건을 둘 이상 추가할 수 있지만 "기타" 또는 기본 요소로 완료해야 합니다.

오늘은 어떻게 사용하는지 알아봤습니다.else if의 조건을 합니다.ngStyle 사 용 원 는 하 만 허 합 니 용 다 을 조 건 의 큼 여 하 을 ▁with 니 합 ▁ng 다 용 허 을 ng style▁allowing ▁as

 [ngStyle]="(myCondition1 === 'hello' && {'background-color': 'purple'}) 
 
 || (myCondition1 === 'world' && {'background-color': 'orange'}) 

 || (myCondition1 === 'fubar' && {'background-color': 'red'})"

참고: 여기 "&&"이 "->"이었다면 더 말이 될 수도 있지만, 구문은 그렇게 된 것 같습니다.

사용:

[ngStyle]="{'background-image': 'url(' +1=1 ? ../../assets/img/emp-user.png : ../../assets/img/emp-default.jpg + ')'}"

언급URL : https://stackoverflow.com/questions/37051496/combine-ngstyle-with-condition-if-else