Angular 17 ngprime 编辑器不显示 ngmodel 值

Question

我正在 Angular 17 中使用 ng prime 和 sakai 主题。我正在尝试使用 ngprime 编辑器，但不渲染 ng 模型。

这是我的项目详细信息：

测试.components.ts

import { Component, OnInit} from '@angular/core';
import {  FormsModule } from '@angular/forms';

import { InputMaskModule } from 'primeng/inputmask';
import { EditorModule } from 'primeng/editor';



@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
  standalone:true,
  imports:[ EditorModule, 
    InputMaskModule, 
    FormsModule  ],
})
export class TestComponent implements OnInit {
  gfg: string = 
  `<div>GeeksforGeeks!</div> 
  <div> 
      It is a Computer Science Portal 
  </div> 
  <div><br></div>`; 

  ngOnInit(): void {

  }



}

test.components.html

<h3 class="first">Default</h3>
<p-editor [(ngModel)]="gfg" [style]="{'height':'320px'}" [debug]="true" [placeholder]="gfg"></p-editor>
<p>Value: {{gfg||'empty'}}</p>

<button pButton type="button" label="Clear" icon="fa-close" (click)="gfg=null"></button>

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "sakai-ng": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/sakai-ng",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": [
                            "zone.js"
                        ],
                        "tsConfig": "tsconfig.app.json",
                        "inlineStyleLanguage": "scss",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.scss",
                            "node_modules/primeng/resources/themes/arya-orange/theme.css"
                           
                            
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "1mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "2kb",
                                    "maximumError": "4kb"
                                }
                            ],
                            "outputHashing": "all"
                        },
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "extractLicenses": false,
                            "sourceMap": true,
                            "namedChunks": true
                        }
                    },
                    "defaultConfiguration": "production"
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "configurations": {
                        "production": {
                            "buildTarget": "sakai-ng:build:production"
                        },
                        "development": {
                            "buildTarget": "sakai-ng:build:development"
                        }
                    },
                    "defaultConfiguration": "development"
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "buildTarget": "sakai-ng:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "polyfills": [
                            "zone.js",
                            "zone.js/testing"
                        ],
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "inlineStyleLanguage": "scss",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": [
                           
                        ]
                    }
                }
            }
        }
    }
}

package.json

{
    "name": "sakai-ng",
    "version": "17.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^17.0.5",
        "@angular/cdk": "^17.0.2",
        "@angular/common": "^17.0.5",
        "@angular/compiler": "^17.0.5",
        "@angular/core": "^17.0.5",
        "@angular/forms": "^17.0.5",
        "@angular/platform-browser": "^17.0.5",
        "@angular/platform-browser-dynamic": "^17.0.5",
        "@angular/router": "^17.0.5",
        "@fullcalendar/angular": "^6.0.3",
        "@fullcalendar/core": "^6.0.3",
        "@fullcalendar/daygrid": "^6.0.3",
        "@fullcalendar/interaction": "^6.0.3",
        "@fullcalendar/timegrid": "^6.0.3",
        "@kolkov/angular-editor": "^3.0.0-beta.0",
        "@types/quill": "^2.0.14",
        "chart.js": "^3.3.2",
        "ngx-editor": "^16.0.1",
        "primeflex": "^3.3.1",
        "primeicons": "6.0.1",
        "primeng": "17.2.0",
        "prismjs": "^1.29.0",
        "quill": "^2.0.0-rc.2",
        "rxjs": "~7.8.1",
        "tslib": "^2.5.0",
        "zone.js": "~0.14.0"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^17.0.5",
        "@angular/cli": "^17.0.5",
        "@angular/compiler-cli": "^17.0.5",
        "@types/jasmine": "~4.3.1",
        "jasmine-core": "~4.6.0",
        "karma": "~6.4.2",
        "karma-chrome-launcher": "~3.2.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.1.0",
        "typescript": "~5.2.2"
    }
}

有人可以帮助我吗？

我尝试在 ojnline 中搜索解决方案，但什么也没找到

Answer 1

看来你必须再次检查PrimeNG文档。

好的，首先如果

test.components.ts

是你的根组件，你必须在那里导入

BrowserModule

。然后，让我们看看 PrineNG docs:

1. npm install quill --save （据我所知，您已将其安装为依赖项，没有保存标志）
2. 将 Quill 添加到 angular.json 中的脚本中：

“脚本”：[...“../node_modules/quill/dist/quill.js”]。 - 你错过了这一点。

3. 将 Quill css 添加到 angular.json 中的样式中：

"styles": [ ... "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css"], - 你错过了这一点要么。

然后一切都会正常。