Как назначить динамическое значение в поле значения ngb-progressbar в угловых 6

Question

Я использую ngb-progressbar в угловых 6, как показано ниже:

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

        <i>{{percentageCompleted}}</i>

    </ngb-progressbar>
</p>

Проблема, с которой я здесь сталкиваюсь, заключается в назначении динамических значений в [value].{{percentageCompleted}} внутри <i> является значением для печати, но не внутри [value].

В component.ts файле:

public percentageCompleted: number;

constructor(){
    this.percentageCompleted = 20;
}

Может кто-нибудь подсказать, как я могу назначить динамическое значение[value] поле ngb-progressbar в угловых 6?

ОБНОВЛЕНИЕ:

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

Ошибка:

Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки.Предыдущее значение: 'значение: не определено'.Текущее значение: 'значение: 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

Спасибо за ваши предложения.Однако я решил свою проблему, присвоив значения внутри 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);
    })
  }

Answer 2

Просто снимите скобки со значения ngb-progressbar:

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