为什么我的* ng用于显示两个空项目

我有一个带有吸气剂的服务,可以获取我所有的学生数据。如果我添加一个学生并使用subscription指示我的Student数组已更改,则它可以工作,但是我将如何在get方法上实现它。

我是新来的有角的,所以任何帮助都会很棒!

<div class="row">
  <div class="col-xs-12">
    <div *ngIf="students">
      <ul *ngFor="let student of students" class="list-group">
        <li class="list-group-item">
          <h3>{{ student.studentname }}</h3>
          <h3>{{ student.studentsurname }}</h3>
          <h3>{{ student.studentnumber }}</h3>
        </li>
      </ul>
    </div>
  </div>
</div>
import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { StudentService } from '../student.service';
import { Student } from '../student.model';

@Component({
  selector: 'app-all-students',
  templateUrl: './all-students.component.html',
  styleUrls: ['./all-students.component.css']
})
export class AllStudentsComponent implements OnInit {

  constructor(private studentService: StudentService) { }
  students: Student[];

  ngOnInit() {
    this.students = this.studentService.getStudents();
    console.log(this.students)
  }
}
import { Injectable } from '@angular/core';
import { Student } from './student.model';
import { Subject } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class StudentService {

  private students: Student[] = [
    new Student('Bernhardt', 'du Toit', 17001847),
    new Student('Chane', 'van der Merwe', 17001848)
  ];

  studentChanged = new Subject<Student[]>()

  getStudent(index: number){
    return this.students[index];
  }

  getStudents(){
    return this.students.slice();
  }

  addStudent(student: Student){
    this.students.push(student);
    this.studentChanged.next(this.students.slice())
  }

  addStudents(students: Student[]){
    this.students.push(...students);
    this.studentChanged.next(this.students.slice())
  }
}

附件是我的html文件,ts文件和服务

评论