Встроенный редактируемый список объектов Угловой 6

голоса
-1

У меня есть список Person

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

Я успешно отобразить этот список, как это:

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

Теперь я хотел бы сделать поле для nameредактирования инлайн и сделать поле birthdateредактирования с Datepicker всплывающего окна.
Я хотел бы также потребуется подтверждение и изменения будут вызывать Web API вызова.
Что является лучшим способом для достижения этой цели?

Задан 19/09/2018 в 13:20
источник пользователем
На других языках...                            


2 ответов

голоса
1

Вы можете добавить ввод текста или DatePicker в тд, как это

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

Т.С.

onValueChange(value:any){
  //this api call or whatever you need to do on value change
}

или вы можете использовать другие угловые компоненты , основанные как primeng или AG-сетка

Ответил 19/09/2018 в 13:32
источник пользователем

голоса
1

Вы можете использовать ReactiveForm с formArray и использовать библиотеку mydatepicker для DatePicker. В Документации хорошо описаны , но если у вас есть какие - либо вопросы , я отвечу как можно скорее! Вот хороший учебник тоже: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Ответил 19/09/2018 в 13:30
источник пользователем

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