Inline lista editable de objetos en angular 6

votos
-1

Tengo una lista de Person

class Person {
  name: string;
  birthdate: Date;
}

Exhibo con éxito esta lista como esta:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor=let person of persons>
            <td>{{ person.name }}</td>
            <td>{{ person.birthdate }}</td>
        </tr>
    </tbody>
</table>

Ahora me gustaría hacer que el campo nameen línea editable y para que el campo birthdateeditable con el selector de fechas emergente.
También me necesita validación y las modificaciones dará lugar a una llamada a la API web.
¿Cuál es la mejor manera de lograr ese objetivo?

Publicado el 19/09/2018 a las 13:20
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
1

puede agregar la entrada de texto o selector de fechas en td como esto

en el archivo html

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let person of persons">
            <td><input type="text" (input)="onValueChange(person.name)" [(ngModel)]="person.name"/></td>
            <td><input type="date" [(ngModel)]="person.birthdate"/></td>
        </tr>
    </tbody>
</table>

ts

onValueChange(value:any){
  //this api call or whatever you need to do on value change
}

o puede utilizar otros componentes basados angulares como primeng o AG-grid

Respondida el 19/09/2018 a las 13:32
fuente por usuario

votos
1

Se puede usar un ReactiveForm con un formArray y el uso de la biblioteca mydatepicker para el selector de fechas. Las documentaciones están bien descritas, pero si usted tiene cualquier pregunta voy a responder lo antes posible! Aquí es un buen tutorial también: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Respondida el 19/09/2018 a las 13:30
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more