Inline redigerbar liste over objekter i Vinkel 6

stemmer
-1

Jeg har en liste over Person

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

Jeg hell vise denne listen slik ut:

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

Nå ønsker jeg å gjøre feltet nameredigerbar inline og for å gjøre feltet birthdateredigerbar med datepicker popup.
Jeg vil også trenge validering og endringene vil utløse en web api kall.
Hva er den beste måten å oppnå dette målet?

Publisert på 19/09/2018 klokken 13:20
kilden bruker
På andre språk...                            


2 svar

stemmer
1

du kan legge til skriving eller datepicker i td som dette

i html-fil

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

eller du kan bruke andre vinkel baserte komponenter som primeng eller ag-grid

Svarte 19/09/2018 kl. 13:32
kilden bruker

stemmer
1

Du kan bruke en ReactiveForm med en formArray og bruke mydatepicker bibliotek for datepicker. De dokumentasjoner er godt beskrevet, men hvis du har noen spørsmål jeg vil svare asap! Her er en god tutorial for: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Svarte 19/09/2018 kl. 13:30
kilden bruker

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