在 Angular 5 中动态更改 Bootstrap Progress-Bar 的属性答案

【问题标题】：Change dinamically attributes for Bootstrap Progress-Bar in Angular 5在 Angular 5 中动态更改 Bootstrap Progress-Bar 的属性
【发布时间】：2018-11-14 05:59:52
【问题描述】：

我有以下代码，我想做两件事：

根据verifyDifficulty(text1) 的输出更改条形颜色（返回输入文本的长度 - 模拟密码的难度）

一个。如果verifyDifficulty(text1)<=3 那么条形颜色=红色（css 中的简单进度）
湾。如果verifyDifficulty(text1)>3 && verifyDifficulty(text1)<=6 那么条形颜色=黄色（css 中的进度-中等）
C。如果verifyDifficulty(text1)>6 && verifyDifficulty(text1)<=9 然后栏颜色=浅绿色（css 中的进度困难）
d。 if verifyDifficulty(text1)==10 then bar color=dark green (css 中的进度非常困难)
将aria-valuenow 值修改为verifyDifficulty(text1)*10，但当我尝试进行属性绑定时，我收到此错误：无法绑定到“aria-valuenow”，因为它不是'div'

我的.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  text1 = '';

  verifyDifficulty(text) {
    const result = text.length;
    return result;
  }
}

我的.html：

<hello name="{{ name }}"></hello>
<div class="pb-1">
  <input [(ngModel)]="text1" maxlength="10" placeholder="Text">
</div>
<p>{{verifyDifficulty(text1)}}</p>
<div  *ngIf="verifyDifficulty(text1)<=3" class="progress">
  <div class="progress-bar progress-easy" role="progressbar" aria-valuenow="60" aria-valuemin="0"
    aria-valuemax="100" [style.width]="verifyDifficulty(text1)*10+'%'">
    {{verifyDifficulty(text1)*10}}
  </div>
</div>

我的.css：

p {
  font-family: Lato;
}

.progress-bar.progress-easy{
  background-color: #fd0801;
}

.progress-bar.progress-medium{
  background-color: #c1b706;
}

.progress-bar.progress-hard{
  background-color: #8bdb06;
}

.progress-bar.progress-very-hard{
  background-color: #00b006;
}

此代码的现场演示is here

【问题讨论】：

标签： html css angular twitter-bootstrap

【解决方案1】：

您的所有 CSS 都可以使用 ngClass 处理。 ngClass 允许您根据条件将样式应用于元素，因此您可以为进度条执行以下操作：

<div class="progress-bar progress-easy" 
     role="progressbar" 
     aria-valuenow="60" 
     aria-valuemin="0"
     aria-valuemax="100"
     [style.width]="verifyDifficulty(text1)*10+'%'"
     [ngClass]="{
        'progress-easy' : verifyDifficulty(text1)<=3,
        'progress-medium' : verifyDifficulty(text1)>3 && verifyDifficulty(text1)<=6,
        'progress-hard' : verifyDifficulty(text1)>6 && verifyDifficulty(text1)<=9,
        'progress-very-hard' :  verifyDifficulty(text1)==10
     }">
     {{verifyDifficulty(text1)*10}}
</div>

不过，为了让您的模板更简洁，我可能会在模板中应用 [ngClass] 函数，而不是原始条件。例如

<div class="progress-bar progress-easy" 
     role="progressbar" 
     aria-valuenow="60" 
     aria-valuemin="0"
     aria-valuemax="100"
     [style.width]="verifyDifficulty(text1)*10+'%'"
     [ngClass]="getStyleClass(text1)">
     {{verifyDifficulty(text1)*10}}
</div>

其中getStyleClass(text1) 是组件中的一个函数，它根据输入返回类。

现在，对于您的 aria 问题，首先，要在 Angular 中应用一个属性，您可以使用 attr 绑定，如前所述，因此在您的情况下：

[attr.aria-valuenow]="whatever"

替代方案，也许更好，取决于您的思想流派，是使用 Renderer2 动态应用 aria，因此，您需要将其注入您的组件中，并使您的进度条成为 ViewChild .

@ViewChild('progressBar') progressBar: ElementRef;

constructor(private renderer2: Renderer2) { }

现在你的模板变成了：

<div #progressBar class="progress-bar progress-easy" 
     role="progressbar" 
     aria-valuenow="60" 
     aria-valuemin="0"
     aria-valuemax="100"
     [style.width]="verifyDifficulty(text1)*10+'%'"
     [ngClass]="getStyleClass(text1)">
     {{verifyDifficulty(text1)*10}}
</div>

注意 #progressBar 的添加 - 这会将元素标记为该引用下的 viewchild。

现在，当您需要更改 aria 值时，您可以通过以下方式动态执行：

this.renderer2.setAttribute(this.progressBar.nativeElement, 'aria-valuenow', 'whatever value');

工作很好！ ??

【讨论】：

【解决方案2】：

尝试使用

attr.aria-valuenow="60"

或

[attr.aria-valuenow]="60"

【讨论】：