Встроенный редактируемый список объектов в Angular 6
У меня есть список 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.
Мне также понадобится проверка, и изменения вызовут вызов веб-API.
Как лучше всего достичь этой цели?
Ответы 2
Вы можете использовать ReactiveForm с formArray и использовать библиотека mydatepicker для датпикера. Документация хорошо описана, но если у вас возникнут вопросы, я отвечу как можно скорее! Вот и хороший учебник: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/
вы можете добавить текстовый ввод или датупикер в td следующим образом
в 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
}
или вы можете использовать другие угловые компоненты, такие как Primeng или сетка
спасибо за ваш пример и ваши 2 ссылки. Я использовал редактор таблиц PrimeNg, который прост в использовании и соответствует моим потребностям.
спасибо за Ваш ответ. Туто очень интересно.