如何在角度 6 中 ngb 进度条的值字段中分配动态值

Question

我在角度 6 中使用ngb-progressbar如下：

<p>
<ngb-progressbar
type="info"
[value]="{{percentageCompleted}}"
[striped]="true"
[animated]="true">
<i>{{percentageCompleted}}</i>
</ngb-progressbar>
</p>

我在这里面临的问题是将动态值分配给[value]。<i>内部的{{percentageCompleted}}是打印值，但不是[value]内部。

在component.ts文件中：

public percentageCompleted: number;
constructor(){
this.percentageCompleted = 20;
}

有人可以建议我如何将动态值分配给角度 6 中的ngb-progressbar[value]字段吗？

更新：

<ngb-progressbar
type="info"
[value]="percentageCompleted"
[striped]="true"
[animated]="true">

错误：

错误：表达式

已更改之后已检查错误：表达式在检查后已更改。以前的值："值：未定义"。当前值："值：4.75"。

来自constructor的代码

this.sharedMessage.shareMessage$.subscribe((data) => {
this.message = data; 
this.prevQuestionId = this.message[0]; 
this.currentQuestionId = this.message[1]; 
this.nextQuestionId = this.message[2]; 
this.percentageCompleted = this.message[3]; 
console.log("I am message from questionnaire home component>>>>>" + this.message);
})

Answer 1

只需从ngb-progressbar值中删除括号：

<ngb-progressbar
type="info"
[value]="percentageCompleted"
[striped]="true"
[animated]="true">
<i>{{percentageCompleted}}</i>
</ngb-progressbar>

Answer 2

感谢您的建议。但是，我通过在 ngOnIn(({} 而不是在构造函数内部分配值来解决我的问题。

对我有用的答案如下：

ngOnInit() {
this.sharedMessage.shareMessage$.subscribe((data) =>{
this.message=data;
this.prevQuestionId=this.message[0];
this.currentQuestionId=this.message[1];
this.nextQuestionId=this.message[2];
setTimeout(()=>{
this.percentageCompleted=this.message[3];
},1000);
})
}