Question

我这里有个突如其来的飞车-https://stackblitz.com/edit/angular-py9lmk?file=src%2Fapp%2Fapp.component.ts

它是带有基本进度条类型的简单Angular应用。

金额显示为红色的条形，带有黑色标记，文字显示金额。

文本位于黑色标记的左侧。

我想将文本保持在一行上。

当数量大于50时，我希望文本在黑色标记的右侧-因此，从0到50，文本将在标记的左侧，然后在50之上，它将在黑色标记的右侧

当文本应位于左侧或右侧时，我已经向标记添加了左右类，但是我无法弄清楚如何使文本位于黑色标记的正确一侧并将其保持在正确的位置。 / p>

*{
  margin: 0;
  padding: 0;
}

.main{
  position: relative;
  width: 400px;
}

.bar{
  background: lightgrey;
  width: 100%;
  height: 10px;
}

.inner-bar{
  background: red;
  height: 10px;
}

.marker{
  border-left: 2px solid black;
  font-family: sans-serif;
  font-size: 12px;
  left: 40%;
  padding: 20px 0 0 5px;
  position: absolute;
  top: -5px;
}

/* .marker-left{
  border-right: 2px solid black;
}

.marker-right{
  border-left: 2px solid black;
} */

Answer 1

此代码可以解决问题：

try {
        let response = await this.httpClient
           .get(environment.serverUrl + 'api/user/1',  { observe: 'response' })
           .toPromise();
        console.log(response); //object with status, message...
     catch (error) {
        console.log(error); //only string "Not found"
    }

我们分两个步骤进行操作：

有条件地将[ngStyle]="{ 'left': data <= 50 ? data + '%' : 'auto', 'right': data > 50 ? 100 - data + '%' : 'auto' }" [ngClass]="data <= 50 ? 'marker-right' : 'marker-left'"或left属性与三元运算符一起应用。
有条件地将“ marker”类（左或右）应用于三元运算符。

您可以在此处查看动画演示：https://stackblitz.com/edit/angular-t5v2xw

请勿在模板中绑定函数，否则可能会导致性能问题，您只需将数据绑定到right变量即可。我在没有它们的情况下重建了您的小型项目。

Angular CSS-根据条件移动文本的位置

1 个答案: