Inline bewerkbare lijst van objecten in Angular 6

stemmen
-1

Ik heb een lijst van Person

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

Ik met succes deze lijst zo te tonen:

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

Nu zou ik graag naar het veld te maken namebewerkbaar inline en om het veld te maken birthdatebewerkbaar met datepicker popup.
Ik zou ook validatie nodig hebt en de wijzigingen zullen een web api oproep triggeren.
Wat is de beste manier om dat doel te bereiken?

De vraag is gesteld op 19/09/2018 om 13:20
bron van user
In andere talen...                            


2 antwoorden

stemmen
1

U kunt tekstinvoer of datepicker toe te voegen in td als deze

in html-bestand

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

of u kunt andere hoekige gebaseerde componenten zoals gebruiken primeng of ag-grid

antwoordde op 19/09/2018 om 13:32
bron van user

stemmen
1

Je kan gebruik maken van een ReactiveForm met een formArray en gebruik de mydatepicker bibliotheek voor de datepicker. De documentatie zijn goed beschreven, maar als u vragen heeft zal ik zo snel mogelijk beantwoorden! Hier is een goede tutorial ook: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

antwoordde op 19/09/2018 om 13:30
bron van user

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