Ngx-редактор не отображается ни в одном браузере

Question

Я только что добавил ngx-editor версию 3.3.0 в мое угловое приложение.Однако, когда я добавляю строку ниже в мой app.module.html

<app-ngx-editor [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>

, в моем браузере ничего не отображается.Я также добавил модуль formsModule, font-awesome module и ngx-bootstrap в свой проект в app.module.ts.Ниже мой app.module.ts:

...
import { FormsModule} from '@angular/forms'
import { NgxEditorModule } from 'ngx-editor';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  declarations: [
    AppComponent,
    UserListComponent,
    SendMenuComponent,
    UsersRecordComponent,
    AdminAddComponent,


  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    FormsModule,
    ToastrModule.forRoot(),
    BrowserAnimationsModule,
    NgxEditorModule,
    AngularFontAwesomeModule,
    TooltipModule.forRoot(),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Я наконец решил эту проблему, добавив строку:

htmlContent = '<p>Hi</p>';

в мой файл app.component.ts.Это использовалось для установки значения вашего атрибута [(ngMode)] в теге app-ngx-editor, т. Е. [(ngModel)]="htmlContent".

. Также по умолчанию высота редактора сжимается.Мы можем установить свойства редактора, добавив директиву свойства [config] = "editorConfig" к тегу app-ngx-editor и присвоив значение в файле app.component.ts, т.е.

app.component.html

<app-ngx-editor [config]="editorConfig" [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></app-ngx-editor>

app.component.ts

editorConfig = {
    editable: true,
    spellcheck: false,
    height: '70em',
    minHeight: '5rem',
    width: '100%',
    translate: 'no'
  };

  htmlContent = '<p>Hi</p>';