Angular Can'；从可观察到的数据集设置ng ace编辑器的代码_Angular_Ace Editor

Angular Can'；从可观察到的数据集设置ng ace编辑器的代码

angular

Angular Can'；从可观察到的数据集设置ng ace编辑器的代码,angular,ace-editor,Angular,Ace Editor,我在从可观察对象填充文本时遇到了问题（from和delay应该模拟未来的服务） page.component.html: <ace-editor #editor style="height:350px;" [text]="code" [mode]="'html'" [theme]="'clouds'" [readOnly]="false" [autoUpdateContent]="true" ></ace-editor>

我在从可观察对象填充文本时遇到了问题（

from

和

delay

应该模拟未来的服务）

page.component.html:

<ace-editor #editor
    style="height:350px;"
    [text]="code"
    [mode]="'html'"
    [theme]="'clouds'"
    [readOnly]="false"
    [autoUpdateContent]="true"
></ace-editor>

export class PageComponent implements AfterViewInit, OnInit {
    code: string = '';
    editorOptions: any = {
        showPrintMargin: false,
        showInvisibles: true,
        highlightGutterLine: true,
    };

    @ViewChild('editor') editor;

    ngOnInit() {
        this._dummyGetUserHtml().subscribe(data => {
            this.code = data; // why won't this work?
            this.editor.getEditor().setValue(data); // and we need this?
            console.log('code', data);
        });
    }

    ngAfterViewInit() {
        this.editor.getEditor().setOptions(this.editorOptions);
    }

    private _dummyGetUserHtml(){
        return Observable.from([
            `<body><p>Hello world!</p></body>`
        ]).delay(1000);
    }
}

page.component.ts:

<ace-editor #editor
    style="height:350px;"
    [text]="code"
    [mode]="'html'"
    [theme]="'clouds'"
    [readOnly]="false"
    [autoUpdateContent]="true"
></ace-editor>

export class PageComponent implements AfterViewInit, OnInit {
    code: string = '';
    editorOptions: any = {
        showPrintMargin: false,
        showInvisibles: true,
        highlightGutterLine: true,
    };

    @ViewChild('editor') editor;

    ngOnInit() {
        this._dummyGetUserHtml().subscribe(data => {
            this.code = data; // why won't this work?
            this.editor.getEditor().setValue(data); // and we need this?
            console.log('code', data);
        });
    }

    ngAfterViewInit() {
        this.editor.getEditor().setOptions(this.editorOptions);
    }

    private _dummyGetUserHtml(){
        return Observable.from([
            `<body><p>Hello world!</p></body>`
        ]).delay(1000);
    }
}

导出类PageComponent实现AfterViewInit、OnInit{
代码：字符串=“”；
编辑选项：任意={
showPrintMargin:false，
showInvisibles:没错，
highlightGutterLine：没错，
};
@ViewChild（“编辑器”）编辑器；
恩戈尼尼特（）{
这是._dummyGetUserHtml（）.subscribe（数据=>{
this.code=data；//为什么不起作用？
this.editor.getEditor（）.setValue（data）；//我们需要这个吗？
console.log（'代码'，数据）；
});
}
ngAfterViewInit（）{
this.editor.getEditor（）.setOptions（this.editorOptions）；
}
private_dummyGetUserHtml（）{
从…返回([
` 世界你好！`
]).延迟（1000）；
}
}

我做错了什么？（当我将订阅移动到

ngAfterViewInit

时，该功能也不起作用）

我的意思是：我知道，而不是：

this.code=data

我可以做

this.editor.getEditor（）.setValue（data）

，但是由于软件包说明说组件接受

text

作为

@Input

，我希望我的原始代码应该在不使用api方法的情况下工作。

我不明白问题所在。您的代码不包含您在文本中提到的

this.text=data

。这是一个明显的打字错误。我从头顶上写下了这篇文章。应该是

this.code=data

-修复我的帖子。我仍然不知道实际问题是什么。ace编辑器接受

[text]

输入。这意味着，通过在html中说

[text]=“code”

，我们应该让编辑器在

This.code=…

分配新值时更新其文本。这种情况不会发生。我不得不求助于ace编辑器api方法

.setValue（data）

。我就是不明白。这似乎是个问题。也许它忽略了初始化后的更改。我不明白问题是什么。您的代码不包含您在文本中提到的

this.text=data

。这是一个明显的打字错误。我从头顶上写下了这篇文章。应该是

this.code=data

-修复我的帖子。我仍然不知道实际问题是什么。ace编辑器接受

[text]

输入。这意味着，通过在html中说

[text]=“code”

，我们应该让编辑器在

This.code=…

分配新值时更新其文本。这种情况不会发生。我不得不求助于ace编辑器api方法

.setValue（data）

。我就是不明白。这似乎是个问题。也许它会忽略初始化后的更改。