Soros szerkeszthető objektumok listája szögletes 6

szavazat
-1

Van egy lista Person

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

Sikeresen jeleníti meg a listát, mint ez:

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

Most szeretném, hogy a mező nameszerkeszthető inline és hogy a mező birthdateszerkeszthető datepicker popup.
Azt is meg kell érvényesítését és a módosítások indít Web API hívást.
Mi a legjobb módja annak, hogy e cél elérése érdekében?

A kérdést 19/09/2018 13:20
a forrás felhasználó
Más nyelveken...                            


2 válasz

szavazat
1

felveheti szövegbeviteli vagy datepicker a td, mint ez

html fájl

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

vagy használhat más szögletes alapú komponensek, mint primeng vagy ag-rács

Válaszolt 19/09/2018 13:32
a forrás felhasználó

szavazat
1

Jól jönne egy ReactiveForm egy formArray és használja a mydatepicker könyvtárat a datepicker. A dokumentációk jól le vannak írva, de ha bármilyen kérdés fogok válaszolni mihamarabb! Itt van egy jó tutorial is: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Válaszolt 19/09/2018 13:30
a forrás felhasználó

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