Почему мой * ng для отображения двух пустых элементов

Question

У меня есть служба с геттером, которая получает все данные моих студентов. Если я добавлю студента и использую подписку, чтобы указать, что мой массив Студента изменился, он работает, но как я буду реализовывать это в методе get.

Я новичок в angular, поэтому любая помощь будет отличной !!

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

import { Component, OnInit, AfterViewInit, AfterViewChecked, Input, OnChanges } from '@angular/core';
import { StudentService } from '../student.service';
import { Student } from '../student.model';
import { Subscription } from 'rxjs';

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

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

  ngOnInit(): void {
    this.students = this.studentService.getStudents();
    this.studentService.studentChanged.next(this.students)
    this.studentSub = this.studentService.studentChanged.subscribe(
      (students: Student[]) => {
        this.students = this.studentService.getStudents();
      }
    )
  }

  ngAfterViewInit(){

  }
}

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 и мой сервис.

Опять любая помощь будет высоко ценится

Answer 1

Вам необходимо изменить имена в соответствии с именами ученического класса.

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.stname}}</h3>
          <h3>{{ student.stsurname }}</h3>
          <h3>{{ student.stnumber}}</h3>
        </li>
      </ul>
    </div>
  </div>
</div>