Inline editierbaren Liste von Objekten in Angular 6

stimmen
-1

Ich habe eine Liste von Person

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

Ich diese Liste erfolgreich wie folgt angezeigt:

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

Nun möchte Ich mag das Feld machen nameeditierbar Inline- und das Feld zu machen birthdateeditierbar mit Datepicker Popup.
Ich würde auch die Validierung muß , und die Änderungen werden einen Web - API - Aufruf auslösen.
Was ist der beste Weg, um dieses Ziel zu erreichen?

Veröffentlicht am 19/09/2018 um 13:20
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
1

Sie können Texteingabe oder picker in td wie folgt hinzufügen

in HTML-Datei

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

oder können Sie andere Winkel basierten Komponenten wie verwenden primeng oder ag-Gitter

Beantwortet am 19/09/2018 um 13:32
quelle vom benutzer

stimmen
1

Sie könnten einen verwenden ReactiveForm mit einem formArray und die Verwendung mydatepicker Bibliothek für die Datumsauswahl. Die Dokumentationen sind gut beschrieben , aber wenn Sie Fragen haben , so bald wie möglich werde ich antworten! Hier ist ein gutes Tutorial zu: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Beantwortet am 19/09/2018 um 13:30
quelle vom benutzer

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