Редактировать и удалять данные таблицы в angular - PullRequest
Новая
       87

Редактировать и удалять данные таблицы в angular

1 голос
/ 06 августа 2020

Я изучаю формы на Angular. Я создал форму, и при отправке данные формы показаны в таблице ниже. Я хочу добавить к этому функции удаления и редактирования. Пожалуйста, помогите мне.

Ниже представлен стек проекта:

https://stackblitz.com/edit/angular-forms-tdf

Ответы [ 3 ]

4 голосов
/ 06 августа 2020

Предполагая, что вы храните данные, которые хотите удалить, в базе данных, вам нужно будет создать свои кнопки, отражающие редактирование и удаление, создать метод для каждого в вашем html файле, например 

<div class="col-md-2"><button class="btn btn-danger" (click)="delete(std)">DELETE</button></div>

, а в файл ts вы должны вставить код, например 

//you make a call to your APi which references your backend
delete(person: Persons): void{
    this.apiService.deletePerson(person.Id)//method name in your services.ts file
    .subscribe(data =>{
      this.person = this.person.filter(u => u !==person);
    });

, как упоминалось выше, вам также понадобится вызов в вашем файле услуг (обратите внимание, что в этом примере используются php и mysql ), например: 

deletePerson(Id: number):Observable<ApiResponse>  {
    return this.http.delete<ApiResponse>(`http://localhost/angular9crud/delete.php?id=${id}`);
  }

Если вы используете бэкэнд, например php, то я рекомендую посмотреть несколько видео на YouTube, так как доступно много информации и подробных объяснений

1 голос
/ 06 августа 2020

если вы хотите удалить несколько элементов, вам нужно добавить еще одно свойство пользователю, которое имеет selected как логическое значение типа, затем с помощью флажка введите и удалите значение. 

<tbody >
     <tr *ngFor="let user of formData">
      <td *ngIf="editMode"> <input type="checkbox" [(ngModel)]="user.selected"/></td>
      <td>{{user.Name}}</td>
      <td>{{user.email}}</td>
      <td>{{user.phoneNumber}}</td>
      <td>{{user.password}}</td>
      <td>{{user.gender}}</td>
     </tr>
</tbody>

затем, нажав кнопку удаления, удалите все выбранные элементы 

delete(){
  this.formData =  this.formData.filter( value =>{
    return value.selected === false;
    })
  }

и отправьте обновленные данные в бэкэнд при нажатии кнопки сохранения. Я обновил Stackblitz .

1 голос
/ 06 августа 2020

Я бы не предпочел удалять какой-либо элемент с помощью фильтра, пока это не единственный способ, потому что он имеет сложность O (n) (это означает, что он будет l oop по всем элементам, чтобы найти, какой элемент удалить), я бы предпочел удалить любой элемент по индексу со сложностью O (1). 

delete(index): void{
    // delete directly via index by javascript splice() method
    });
...