Inline Lista editabile de obiecte unghiulare 6

voturi
-1

Am o listă de Person

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

Am afișa cu succes această listă ca aceasta:

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

Acum , aș dori să fac câmpul nameinline editabil și pentru a face câmpul birthdateeditabil cu DatePicker pop - up.
Am avea nevoie , de asemenea , de validare și modificările vor declanșa un apel web api.
Care este cel mai bun mod de a atinge acest obiectiv?

Întrebat 19/09/2018 la 13:20
sursa de către utilizator
În alte limbi...                            


2 răspunsuri

voturi
1

puteți adăuga de introducere a textului sau DatePicker în td ca aceasta

în fișierul 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
}

sau puteți utiliza alte componente pe bază unghiulare , cum ar fi primeng sau ag-grid

Publicat 19/09/2018 la 13:32
sursa de către utilizator

voturi
1

Ai putea folosi un ReactiveForm cu un formArray și de a folosi biblioteca mydatepicker pentru DatePicker. Documentatiile sunt bine descrise , dar dacă aveți orice întrebare voi răspunde la ASAP! Aici este un tutorial prea bun: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Publicat 19/09/2018 la 13:30
sursa de către utilizator

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