html - 根据某些条件对齐按钮

Question

我必须根据某些条件显示一些按钮。如果条件为真，我需要 5 个对齐的按钮(效果很好)但是当条件为假时，我需要 7 个按钮，但顶部有相同的 4 个按钮，下一行的下 3 个按钮应该居中对齐。我如何实现这一目标？

最后三行有If条件。

<div style="center-align">
<div class="styling"><button>1</button></div>
<div class="styling"><button>2</button></div>
<div class="styling"><button>3</button></div>
<div class="styling"><button>4</button></div>
<div class="styling"><button>5</button></div> 
<div class="styling"><button>6</button></div> 
<div class="styling"><button>7</button></div>
</div>

.styling{
 display: block;
      float: left;
      padding-top: 10px;
}

Answer 1

Angular 提供了几种有条件地添加类的方法:

1. [class.my-class]="condition"

2. [ngClass]="{'my-class': condition'}"

3.[ngClass]="(condition)?'my-class1':'my-class2'"