ngx-editor 显示占位符，尽管它有一个值

Question

我有一个使用 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 class:

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

  ],

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

Answer 1

是 [(ngModel)]，不是 [ngModel]。记住：盒子里的香蕉。

Answer 2

我看到的是您想要使用两种方式绑定 [(ngModel)] 而不是一种方式 [ngModel]。也许此资源可以帮助您更好地理解 Angular Databinding in Angular.

中的不同数据绑定变体

Answer 3

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxEditorModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 4

我已经复制了你的问题并且它工作正常，在此处添加堆栈闪电战 link。

workingDemo

ngx-editor 显示占位符，尽管它有一个值

ngx-editor showing placeholder although it has a value

angular

ngx-editor