Блог

Главная - Вопросы по программированию - У меня один и тот же ngStyle для 2 разных элементов. Как перезаписать их, чтобы сохранить код сухим?

У меня один и тот же ngStyle для 2 разных элементов. Как перезаписать их, чтобы сохранить код сухим?

#javascript #angular #typescript #dry #ng-style

#javascript #angular #typescript #сухой #нг-стиль #ng-style

Вопрос:

Я хочу перезаписать ngstyle

             <p class="is-discount" [ngStyle]="{
                'background-color':
                  bike.discount > 70
                    ? 'red'
                    : bike.discount > 60
                    ? 'pink'
                    : bike.discount > 50
                    ? 'orange'
                    : null
              }">
              -{{ bike.discount }}%
            </p>

70
? ‘красный’
: bike.скидка > 60
? ‘розовый’
: bike.скидка > 50
? ‘оранжевый’
: null
}»>
-{{ bike.discount }}%

           <p [ngStyle]="{
              'color':
                bike.discount > 70
                  ? 'red'
                  : bike.discount > 60
                  ? 'pink'
                  : bike.discount > 50
                  ? 'orange'
                  : null
            }">
              {{
                bike.price - (bike.discount / 100) * bike.price
                  | currency: "EUR"
              }}
            </p>

Ответ №1:

Если вы хотите использовать один и тот же ngStyle для обоих элементов. Создайте переменную в вашем .ts файле компонента:

 myStyle = {
           'color':
            bike.discount > 70
            ? 'red'
            : bike.discount > 60
            ? 'pink'
            : bike.discount > 50
            ? 'orange'
            : null
          }

и затем вы можете использовать его в .html файле вашего компонента следующим образом:

 <p class="is-discount" [ngStyle]="myStyle">
  -{{ bike.discount }}%
</p>