I'm feeling a bit lost here as to why my code isn't functioning correctly. For some reason, it's not displaying the predefined items that I've set up. Any guidance or assistance would be greatly appreciated. Dealing with Angular errors has been quite challenging for me lately, especially since I'm new to all of this. Thank you in advance for any help.
Let's start by looking at my HTML files:
---------------------------
<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>
Now, onto my TypeScript file:
----------------------------------------------------
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(){
}
}
And finally, my Injectable script:
---------------------------------------------------
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())
}
}
If anyone can offer some insights or solutions, I would be incredibly grateful.