Inline lista editável de objetos em Angular 6

votos
-1

Eu tenho uma lista de Person

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

I exibir com sucesso esta lista como esta:

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

Agora eu gostaria de fazer o campo nameem linha editável e para tornar o campo birthdateeditável com datepicker popup.
Eu também preciso de validação e as modificações irá desencadear uma chamada de API web.
Qual é a melhor maneira de alcançar esse objetivo?

Publicado 19/09/2018 em 13:20
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

você pode adicionar a entrada de texto ou datepicker em td como este

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

ou você pode usar outros componentes baseados angulares como primeng ou ag-grid

Respondeu 19/09/2018 em 13:32
fonte usuário

votos
1

Você poderia usar um ReactiveForm com um formArray e usar a biblioteca mydatepicker para o datepicker. As documentações são bem descritos, mas se você tem alguma dúvida eu vou responder o mais cedo possível! Aqui está um bom tutorial também: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Respondeu 19/09/2018 em 13:30
fonte usuário

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