Inline lista modificabile di oggetti in angolare 6

voti
-1

Ho una lista di Person

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

Visualizzo con successo questa lista come questa:

<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>

Ora vorrei rendere il campo namein linea modificabile e per rendere il campo birthdatemodificabile con datepicker popup.
Vorrei anche bisogno di convalida e le modifiche attiverà una chiamata API Web.
Qual è il modo migliore per raggiungere questo obiettivo?

È pubblicato 19/09/2018 alle 13:20
fonte dall'utente
In altre lingue...                            


2 risposte

voti
1

è possibile aggiungere l'immissione di testo o datepicker in td come questo

in file 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
}

oppure è possibile utilizzare altri componenti a base di angolari come primeng o ag-grid

Risposto il 19/09/2018 a 13:32
fonte dall'utente

voti
1

Si potrebbe usare un ReactiveForm con un formArray e utilizzare la libreria mydatepicker per il DatePicker. Le documentazioni sono ben descritti, ma se avete qualche domanda io risponderò al più presto! Ecco un buon tutorial troppo: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Risposto il 19/09/2018 a 13:30
fonte dall'utente

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