你好，我正在做一個 Angular 專案，我有我的組件，用于在 AceEditor 上編輯代碼，如下所示：
public lesson!: LessonId;
cssResponse = '';
aceEditor: any = '';
idLesson = this.route.snapshot.paramMap.get('lessonsName');
constructor(
private aceEditorService: AceEditorService,
private lessonsService: LessonsService,
private route: ActivatedRoute
) {
this.getLessons();
}
getLessons() {
this.lessonsService.Lesson(this.idLesson).subscribe((lesson: LessonId) => {
this.lesson = lesson;
console.log(this.lesson);
});
}
ngAfterViewInit(): void {
ace.config.set('fontSize', '16px');
ace.config.set(
'basePath',
'https://unpkg.com/[email protected]/src-noconflict'
);
this.aceEditor = ace.edit(this.editor.nativeElement);
this.aceEditor.setTheme('ace/theme/dracula');
this.aceEditor.session.setMode('ace/mode/css');
this.aceEditor.on('change', () => {
this.cssResponse = this.aceEditor.getValue();
this.aceEditorService.setCssValues(this.cssResponse);
});
this.aceEditor.session.setValue(this.lesson.cssArea);
this.aceEditor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false,
useSoftTabs: true,
tabSize: 1,
cursorStyle: 'smooth',
});
}
ngOnInit(): void {}
我的 LessonId 界面如下：
export interface LessonId {
id: number;
title: string;
content: string;
htmlArea: string;
cssArea: string;
}
當我想顯示“CssArea”時出現此錯誤
ERROR TypeError: Cannot read properties of undefined (reading 'cssArea')
at IdeCssExerciceComponent.ngAfterViewInit (ide-css-exercice.component.ts:48:49)
at callHook (core.mjs:2551:1)
at callHooks (core.mjs:2520:1)
at executeInitAndCheckHooks (core.mjs:2471:1)
at refreshView (core.mjs:9566:1)
at refreshComponent (core.mjs:10692:1)
at refreshChildComponents (core.mjs:9291:1)
at refreshView (core.mjs:9545:1)
at refreshComponent (core.mjs:10692:1)
at refreshChildComponents (core.mjs:9291:1)
我不知道為什么它是 undefind 我嘗試了多種方法，但我不明白為什么我的服務屬性不在我的界面中任何人都可以幫助我嗎？請
uj5u.com熱心網友回復：
你已經設定了一個競爭條件：如果this.getLessons();之前沒有完成ngAfterViewInit()，this.lesson將是未定義的。移動this.aceEditor.session.setValue(this.lesson.cssArea);到內部getLessons()和getLessons()之后this.aceEditor = ace.edit(this.editor.nativeElement);。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/491837.html
下一篇：RXJS：按順序進行多個訂閱