0

我有一个使用 ngx-editor 的简单组件。html文件如下：

<ng-container>

  <ngx-editor
    class="ngxEditor-view"
    [editor]="editorSummary"
    [ngModel]="test"
    [disabled]="true"
    [placeholder]="'No description available...'"
  ></ngx-editor>
</ng-container>

ts 类：

import {Component, Input, OnInit, OnChanges, EventEmitter, Output, OnDestroy} from '@angular/core';
import {UntilDestroy} from '@ngneat/until-destroy';
import { Editor, Toolbar, Validators as EditorValidators } from 'ngx-editor';

@UntilDestroy({checkProperties: true})
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit, OnChanges, OnDestroy {

  editorSummary: Editor;
  test: string="123";
  constructor() {
  }

  ngOnInit() {
       this.editorSummary = new Editor();
  }

  ngOnChanges(): void {
  }

  closeMe(): void {
    this.isModalOpen = false;
    this.closeModal.emit();
  }

  ngOnDestroy(): void {
    this.editorSummary.destroy();
  }

}

编辑器导入如下：

import { NgxEditorModule } from 'ngx-editor';

@NgModule({
  
  imports: [

    NgxEditorModule

  ],

永远不会显示文本，而是显示占位符的消息。可能是什么原因？我在应用程序的几个地方使用它。只有一页不起作用。

4

4 回答 4

1

我看到的是您想使用两种方式绑定 [(ngModel)] 而不是一种方式 [ngModel]。也许这个资源可以帮助您更好地理解 Angular 中的 Angular Databinding 中的不同 Data Binding 变体。

于 2021-08-25T10:49:19.380 回答
0

我已经复制了您的问题并且它工作正常，在这里添加了一个堆栈闪电战链接。

工作演示

于 2021-08-25T12:08:33.733 回答
0

它是 [(ngModel)]，而不是 [ngModel]。记住：香蕉装在盒子里。

于 2021-08-25T10:44:21.203 回答
0

所以我复制了你的代码。要解决您的问题，您需要导入 FormsModule，因为 NgModel 是所述模块的一部分，没有它就无法工作。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxEditorModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2021-08-25T11:27:27.347 回答