在Angular 5中更改Bootstrap Progress-Bar的动态属性
我有以下代码，我想做两件事：
- 根据
verifyDifficulty(text1)的输出更改条形图的颜色(返回输入文本的长度-模拟密码的难度)
答:如果verifyDifficulty(text1)<=3，那么bar color=red (进度-在css中很容易)
b.如果进度，则显示color=yellow (进度-css中的中)
c.如果为verifyDifficulty(text1)>6 && verifyDifficulty(text1)<=9，则将color=light设置为绿色(进度-在css中很难)
d. if verifyDifficulty(text1)==10 then bar color=dark green (-very-hard in css)
- 将
aria-valuenow值修改为verifyDifficulty(text1)*10，但当我尝试进行属性绑定时，收到此错误:由于不是'div'
的已知属性，因此无法绑定到'aria-valuenow‘
My .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;
}
}My .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>My .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
回答 2
Stack Overflow用户
发布于 2018-06-05 15:51:54
所有的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]，而不是原始条件。e.g
<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动态应用唱段，因此，您需要将其注入到组件中，并将进度栏设置为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 -这将该元素标记为该引用下的一个视图子级。
现在，当您需要更改aria值时，可以使用以下命令动态更改：
this.renderer2.setAttribute(this.progressBar.nativeElement, 'aria-valuenow', 'whatever value');约伯是个不错的人！
Stack Overflow用户
发布于 2018-06-05 04:50:12
尝试使用
attr.aria-valuenow="60"
或
[attr.aria-valuenow]="60"
https://stackoverflow.com/questions/50688389
复制相似问题
腾讯云开发者
