У меня есть angular компонент, который имеет логическую переменную "BodyToggle". В файле component.ts я устанавливаю его значение true для события click, а когда для переменной задано значение true, у меня возникает условие ngIf, которое вызывает модальное состояние.
component.ts
import {Component, EventEmitter, Output, Input, ViewEncapsulation, Injectable, AfterViewInit, OnInit, OnChanges, SimpleChange} from '@angular/core';
@Component({
selector: 'app-chart1',
templateUrl: `./chart1.component.html`
, encapsulation: ViewEncapsulation.None
})
@Injectable({
providedIn: 'root'
})
export class ChartComponent implements OnInit {
BodyToggle: boolean = false;
getCharts(){
let currentContext = this;
if (item.displayType === "bar") {
....
....
events: {
click: function(){
//show modal
currentContext.BodyToggle = true;
}
}
}
}
component. html
<div id="container">
<div *ngIf="BodyToggle">
<clr-modal [(clrModalOpen)]="BodyToggle" [clrModalSize]="'lg'">
<div class="modal-body">
...
</div>
</clr-modal>
</div>
</div>
Теперь, когда я впервые отображаю модальный режим, когда я запускаю событие click, переменная BodyToggle имеет значение true, но она не отражается в представлении. (HTML). Когда я обновляю sh страницу, в событии щелчка я вижу изменение переменной BodyToggle, отраженное в представлении. Я не понимаю, почему он не отражает, когда я рендерил компонент в первый раз. Я также попытался использовать setTimeOut для установки значения в true.
let currentContext = this;
click: function() {
//show modal
currentContext.BodyToggle = false;
setTimeout(() => {
currentContext.BodyToggle = true;
});
Это также, похоже, не решает проблему. Использование ChangeDetectorRef вызывает ошибку «поставщик не найден», так как этот компонент является дочерним компонентом другого родительского компонента. Не могли бы вы помочь мне, как реализовать это так, чтобы при первом отображении компонента изменение в переменной BodyToggle отражалось в представлении (HTML). (В основном ищет реализацию, похожую на scope.apply в angular)
EDIT
Я пробовал ChangeDetectorRef.detectChanges (), но я получаю ошибку поставщика не найдена.
core.js:6014 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[ExpandableOompaLoompa -> ChangeDetectorRef]:
StaticInjectorError(Platform: core)[ExpandableOompaLoompa -> ChangeDetectorRef]:
NullInjectorError: No provider for ChangeDetectorRef!
NullInjectorError: StaticInjectorError(AppModule)[ExpandableOompaLoompa -> ChangeDetectorRef]:
StaticInjectorError(Platform: core)[ExpandableOompaLoompa -> ChangeDetectorRef]:
NullInjectorError: No provider for ChangeDetectorRef!
Так я реализовал это в файле component.ts.
constructor(private crd: ChangeDetectorRef) {}
.....
events: {
click: function(){
//show modal
currentContext.BodyToggle = true;
cdr.detectChanges();
}
}
Я также попробовал ApplicationRef.tick (), который вообще не работал. Не могли бы вы помочь мне с тем, почему эта ошибка могла происходить? Спасибо