Ereignis von PrimeNG p-Datentabelle, wenn Zeile hinzugefügt wird

Question

Ich habe eine p-datatable gebunden an eine Liste von Einträgen. Ich möchte den Fokus auf neu dynamisch erstellte Zeilen legen. speziell auf eine input in der neuen Zeile. Aber wie?

Immer, wenn ich einen Eintrag dynamisch zur gebundenen Liste von Einträgen hinzufüge, wird eine neue Zeile hinzugefügt. Funktioniert gut. Aber ich muss wissen, wann das passiert ist und ich brauche Zugang zu der neuen Reihe, damit ich den Fokus setzen kann. Ich habe nach einer Art von onRowAdded Ereignis gesucht, aber p-datatable scheint nicht zu haben. Wie komme ich damit klar?

<p-dataTable [value]="entries"> 
    . . . 
    <p-column> 
     <ng-template let-item="rowData" pTemplate="body"> 
      <input type="time" [value]="item.StartTime"/> 
    . . . 

Answer 1

Ok, so fand ich eine Lösung/Abhilfe, unabhängig von der p-Datentabelle.

Ich habe eine eckige QueryList auf einem der Vorlagen Elemente in der gerenderten Zeile und abonnieren Sie Änderungen an ihm. Auf diese Weise kann ich zu den neu hinzugefügten Zeilen gelangen, um den Fokus zu setzen.

Also, in dem HTML-Code:

<p-dataTable [value]="entries"> 
    <p-column"> 
     <ng-template let-item="rowData" pTemplate="body"> 
      <input #myInput /> 

... und in dem Code-Behind:

@ViewChildren('myInput') startTimeInputList: QueryList<ElementRef>; 
. . . 
ngAfterViewInit() { 
    this.startTimeInputList.changes.subscribe((p) => { 
     this._renderer.invokeElementMethod(p.last.nativeElement, 'focus'); 
    }); 
}