Inline edycji lista obiektów w kątowa 6

głosy
-1

Mam listę Person

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

Udało mi się wyświetlić tę listę tak:

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

Teraz chciałbym, aby pole nameedycji inline oraz do pola birthdateedycji z datepicker popup.
Chciałbym również potrzeba walidacji i modyfikacje spowodują wywołanie Web API.
Jaki jest najlepszy sposób, aby osiągnąć ten cel?

Utwórz 19/09/2018 o 13:20
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
1

można dodawać wprowadzania tekstu lub datepicker w td tak

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

Można też użyć innych składników opartych kątowych jak primeng lub AG-sieci

Odpowiedział 19/09/2018 o 13:32
źródło użytkownik

głosy
1

Można użyć ReactiveForm z formArray i korzystać z biblioteki mydatepicker dla datepicker. Dokumentacje są dobrze opisane, ale jeśli masz jakieś pytanie Odpowiem jak najszybciej! Oto dobry poradnik za: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Odpowiedział 19/09/2018 o 13:30
źródło użytkownik

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