如何在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

希望這可以幫助.....

結果：

應用程序組件.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 array 函數將項附加到數組。

students: Student[] = [];

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

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

  this.students.push(student);
}