PrimeNG 文本区域问题，空格键不起作用

Question

先生们！ 我遇到了一个问题，希望您提出建议！

我使用 Angular 和 PrimeNG GUI。 我使用 p 表创建了表并填充域对象。 我可以编辑单元格和行，但只能写入，不能在表格的文本区域和输入文本中使用空格键。
我还不知道，也许有人遇到过这样的问题？

<p-table 
[value]="th.repository.getAll()" dataKey="id" 
selectionMode="single" [(selection)]="th.selectedEntity" editMode="row" 
[tableStyle]="{'min-width': '300px'}" styleClass="p-datatable-gridline" styleClass="p-datatable-striped"
(onRowSelect)="th.onRowSelect($event)"
(onRowUnselect)="th.onRowUnselect()"
[paginator]="true"
[rows]="10"

>
    <ng-template pTemplate="header">
      <tr>
       <th colspan="3" >
        {{"Final goods".toString().toUpperCase()}}
        <p-button (click)="th.onAddRaw()" class="tableButton"  label="Добавить" [outlined]="true" severity="secondary"></p-button>
       <p-button (click)="th.onDeleteRaw($event)" class="tableButton" label="Удалить" [outlined]="true" severity="secondary"></p-button>
      </tr>
        <tr>
            <th style="width:60%">Name</th>
            <th style="width:30%">HS CODE</th>
            <th style="width:10%">Edit</th>

        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-concreteFinalgoods let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="concreteFinalgoods" [pSelectableRow]="concreteFinalgoods">



            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                    <textarea rows="3" cols="30" pInputTextarea [autoResize]="true" [(ngModel)]="concreteFinalgoods.name"  class="fullWidth"></textarea>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{concreteFinalgoods.name}}
                    </ng-template>
                </p-cellEditor>
            </td>



            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                    <textarea rows="3" cols="30" pInputTextarea [autoResize]="true" [(ngModel)]="concreteFinalgoods.tnved" required class="fullWidth"></textarea>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{concreteFinalgoods.tnved}}
                    </ng-template>
                </p-cellEditor>
            </td>


   <td>
    <div class="flex align-items-center justify-content-center gap-2">

        <button *ngIf="!editing" pButton pRipple type="button"
         pInitEditableRow icon="pi pi-pencil" (click)="th.onRowEditInit(concreteFinalgoods, ri)" 
         class="p-button-rounded p-button-text"></button>

        <button *ngIf="editing" pButton pRipple type="button"
         pSaveEditableRow icon="pi pi-check" (click)="th.onRowEditSave(concreteFinalgoods, ri)"
          class="p-button-rounded p-button-text p-button-success mr-2"></button>

        <button *ngIf="editing" pButton pRipple type="button" 
        pCancelEditableRow icon="pi pi-times" (click)="th.onRowEditCancel(concreteFinalgoods, ri)" 
        class="p-button-rounded p-button-text p-button-danger"></button> 

    </div>
</td>






        </tr>
    </ng-template>
</p-table>

@Injectable()
export class Repository{
  
    private entities!:Entity[];
    private url:string="";

    constructor(private http: HttpClient) { }

    getEntitiesObservable(): Observable<Entity[]> {
       return this.sendRequest<Entity[]>("GET", this.url+"?all");
    }

    init(url:string){
        this.url=url;
        this.getEntitiesObservable().subscribe(data => this.entities = data);
    }
    getAll():Entity[] {
        return this.entities;
    }
    

    private sendRequest<T>(verb: string, url: string, body?: Entity)
        : Observable<T> {

            console.log("Repository -sendRequest----\n"+verb+"\n"+url+"\n"+"object sent from angular:\n"+JSON.stringify(body));

        let myHeaders = new HttpHeaders();
        myHeaders = myHeaders.set("Content-Type", "application/json");
        myHeaders = myHeaders.set("Access-Control-Allow-Origin", "*");

        let out:Observable<T> = this.http.request<T>(verb, url, {
            body: body,
            headers: myHeaders 
        }).pipe(catchError((error: Response) => {
            throw(`Network Error: ${error.statusText} (${error.status})`)
        })); 

        return out;
    }



}

真心希望大家帮忙。

Answer 1

我不知道为什么会出现这个问题，但我做了一个小技巧来解决

  onKeyDownEvent(event: any){ 
        event.target.value=event.target.value+" "; 
}

 <textarea  (keydown.space)="th.onKeyDownEvent($event)"   rows="3" cols="30" pInputTextarea [autoResize]="true" [(ngModel)]="concreteFinalgoods.name"  class="fullWidth"></textarea>