Как добавить и удалить элемент из массива в Angular

Question

Я делаю проект, который должен отображать массив, и пользователь может добавлять новые данные или удалять существующие данные из массива.

Я застрял с тем, как добавить и удалить элемент из массива.

Я пытался использовать функцию push для добавления и функцию pop для удаления, но не смог .

HTML

<div class="write">
    <h1>Student Details</h1>
    <div class="data" *ngIf="selectedStudent">
        <li> Name: <input type="text" [(ngModel)]="name" placeholder="Please enter Name" value={{selectedStudent.name}}>
        </li>
        <li> Age:<input type="text" [(ngModel)]="age" placeholder="Please enter Age" class="age"
                value={{selectedStudent.age}}></li>
        <li>College:<input type="text" [(ngModel)]="college" placeholder="Please enter College"
                value={{selectedStudent.college}}></li>
    </div>

    <p>
        <button class="btnA" onclick="addStudent()">Add</button>
        <button class="btnE" onclick="editStudent()">Edit</button>
        <button class="btnD" onclick="deleteStudent()">Delete</button>
    </p>

    <li *ngFor="let student of student" [class.selected]="student === selectedStudent" (click)="onSelect(student)">
        <span class="badge">{{student.name}} {{student.age}} {{student.college}}</span>
    </li>
</div>

.ts

export class WriteComponent implements OnInit {

    name: string;
    age: number;
    college: string;
    student = STUDENTS;
    selectedStudent: Student;

    constructor() {}
    ngOnInit(): void {}

    onSelect(student: Student): void {
        this.selectedStudent = student;
    }

}

mock-student.ts (где я храню свой массив)

import { Student } from './student';

export const STUDENTS : Student[]=[
  {name:'Johnny',age:24,college:'Harvard'},
  {name:'Samantha',age:20,college:'INTI'},
  {name:'Aditya',age:21,college:'Sunway'},
  {name:'Troy',age:25,college:'TARUC'},
]

Answer 1

Надеюсь, это поможет .....

Результат:

app.component. html

<div class="container">
<h2>Add User</h2>  
<form class="form-inline" autocomplete="off" (submit)="addStudent()">
    <div class="form-group">
      <label for="email">Name:</label>
      <input type="text" class="form-control" id="name" name="name" [(ngModel)]="user.name">
    </div>
    <div class="form-group">
      <label for="pwd">Age:</label>
      <input type="number" class="form-control" id="age" name="age" [(ngModel)]="user.age">
    </div>
    <div class="form-group">
        <label for="pwd">College:</label>
        <input type="text" class="form-control" id="college" name="college" [(ngModel)]="user.college">
      </div>
    <button type="submit" class="btn btn-success">Submit</button>
</form>

<div class="user-list" *ngIf="usersList && usersList.length">
    <h2>List of Users</h2>           
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>SL.No</th>
            <th>Name</th>
            <th>Age</th>
            <th>College</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of usersList; let i = index">
                <th>{{i}}</th>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.college}}</td>
                <td>
                    <button style="margin-right: 5px;" class="btn btn-warning" (click)="editStudent(i)">Edit</button>
                    <button class="btn btn-danger" (click)="deleteStudent(i)">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

app.component.ts

export class AppComponent implements OnInit{
  user: User;
  usersList: User[] = []

  ngOnInit(): void {
   this.resetForm();
  }

  addStudent() {
   this.usersList.push(this.user);
   this.resetForm();
  }

  editStudent(index: number) {
    this.user = this.usersList[index];
    this.deleteStudent(index);
  }

  deleteStudent(index: number) {
    this.usersList.splice(index, 1);
  }

  resetForm() {
   this.user = {age: null, name: '', college: ''};
  }
}

interface User {
 name: string;
 age: string;
 college: string;
}

Answer 2

Удаление элемента из массива

Вы устанавливаете selectedStudent для одного из экземпляров в вашем массиве, поэтому достаточно просто найти его индекс, когда вы хотите удалить его из массива.

Вы можете использовать функцию массива splice для удаления элемента в индексе.

// declare students here for the purpose of the answer
students: Student[] = [
  {name:'Johnny', age:24, college:'Harvard'}
  // ... more students here
];
selectedStudent : Student;

onSelect(student:Student): void {
  this.selectedStudent = student;
}

deleteStudent(): void {
  if (!this.selectedStudent) {
    return;
  }

  // find the index of the selected student
  // this works because your selected student is one of the array items
  // it wouldn't work if selected student was a copy
  const index = this.students.indexOf(this.selectedStudent);

  // use splice to remove 1 item starting at the given index
  this.students.splice(index, 1);

  // todo: logic to reset this.selectedStudent
}

Добавление элемента в массив

Добавить просто. Используйте функцию массива push для добавления элемента в массив.

students: Student[] = [];

name: string;
age: number;
college: string;

addStudent() {
  const student = { 
    name: this.name,
    age: this.age,
    college: this.college
  };

  this.students.push(student);
}