Почему мои товары возвращаются дважды и как пустые элементы?

Question

Я, честно говоря, не уверен, почему это не работает. Как было сказано ранее, похоже, что он не возвращает ни одного из моих предопределенных пунктов. Был бы признателен за любую помощь с этим. Angular в последнее время была боль, и все ошибки для меня новы, так как я недавно начал. Заранее большое спасибо

Вот мои файлы, начиная с html:

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

Мои обычные ts

----------------------------------------------------
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('Varughese', 'Mathew', 3459879),
    new Student('Sammy', 'Banamy', 3978462)
  ];

  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())
  }
}

Снова, любая помощь будет оценена

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>