如何在Angular中从数组添加和删除项目

debugcn 发表于 Dev

LJ27

我正在做一个需要显示数组的项目，用户可以添加新数据或从数组中删除现有数据。

我对如何在数组中添加和删除项目感到困惑。

我尝试使用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;
    }

}

模拟学生.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'},
]

Aish Anu |

希望这可以帮助.....

结果：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。