Issue
Guys I have a problem with Angular; i am failing to resolve this error:
Error: src/app/student-list/student-list.component.html:31:42 – error
TS2322: Type ‘Observable<Student[]> | undefined’ is not assignable to
type ‘any[] | Iterable | (Iterable & any[]) | (any[] &
Iterable) | null | undefined’. Type ‘Observable<Student[]>’ is
not assignable to type ‘any[] | Iterable | (Iterable &
any[]) | (any[] & Iterable) | null | undefined’.
Type ‘Observable<Student[]>’ is not assignable to type ‘any[] & Iterable’.
Type ‘Observable<Student[]>’ is not assignable to type ‘any[]’. 31 <tr *ngFor="let student of students ">
~~ src/app/student-list/student-list.component.ts:10:16
10 templateUrl: ‘./student-list.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component StudentListComponent.
where student-list.component.html (1) and student-list.component.ts (2) files are as follows:
(1)
<div class="panel panel-default">
<div class="panel-heading">
<h1 style="text-align: center">Students</h1><br>
<div class="row" [hidden]="!deleteMessage">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Student Data Deleted</strong>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<div class="panel-body">
<table class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger" >
<thead class="thead-light">
<tr>
<th>Student Name</th>
<th>Student Email</th>
<th>Student Branch</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students ">
<td>{{student.student_name}}</td>
<td>{{student.student_email}}</td>
<td>{{student.student_branch}}</td>
<td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>
<button (click)="updateStudent(student.student_id)" class='btn btn-info'
data-toggle="modal" data-target="#myModal">Update</button>
</td>
</tr>
</tbody><br>
</table>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" style="text-align: center">Update Student</h4>
</div>
<!-- Modal body -->
<div class="modal-body" *ngFor="let student of studentlist " >
<div [hidden]="isupdated">
<input type="hidden" class="form-control" formControlName="student_id" [(ngModel)]="student.student_id">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" formControlName="student_name" [(ngModel)]="student.student_name" >
</div>
<div class="form-group">
<label for="name">Student Email</label>
<input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
</div>
<div class="form-group">
<label for="name">Student Branch</label>
<select class="form-control" formControlName="student_branch" required>
<option value="B-Tech" [selected]="'B-Tech' == student.student_branch">B-Tech</option>
<option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>
<option value="MCA" [selected]="'MCA' == student.student_branch" >MCA</option>
<option value="M-Tech" [selected]="'M-Tech' == student.student_branch">M-Tech</option>
</select>
</div>
</div>
<div [hidden]="!isupdated">
<h4>Student Detail Updated!</h4>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer" >
<button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>
</div>
</form>
</div>
</div>
</div>
(2)
import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { Student } from '../student';
import { Observable,Subject } from "rxjs";
import {FormControl,FormGroup,Validators} from '@angular/forms';
@Component({
selector: 'app-student-list',
templateUrl: './student-list.component.html',
styleUrls: ['./student-list.component.css']
})
export class StudentListComponent implements OnInit {
constructor(private studentservice:StudentService) { }
studentsArray: any[] = [];
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any>= new Subject();
students: Observable<Student[]> | undefined;
student : Student=new Student();
deleteMessage=false;
studentlist:any;
isupdated = false;
ngOnInit() {
this.isupdated=false;
this.dtOptions = {
pageLength: 6,
stateSave:true,
lengthMenu:[[6, 16, 20, -1], [6, 16, 20, "All"]],
processing: true
};
this.studentservice.getStudentList().subscribe(data =>{
this.students =data;
this.dtTrigger.next();
})
}
deleteStudent(id: number) {
this.studentservice.deleteStudent(id)
.subscribe(
data => {
console.log(data);
this.deleteMessage=true;
this.studentservice.getStudentList().subscribe(data =>{
this.students =data
})
},
error => console.log(error));
}
updateStudent(id: number){
this.studentservice.getStudent(id)
.subscribe(
data => {
this.studentlist=data
},
error => console.log(error));
}
studentupdateform=new FormGroup({
student_id:new FormControl(),
student_name:new FormControl(),
student_email:new FormControl(),
student_branch:new FormControl()
});
updateStu(updstu){
this.student=new Student();
this.student.student_id=this.StudentId!.value;
this.student.student_name=this.StudentName!.value;
this.student.student_email=this.StudentEmail!.value;
this.student.student_branch=this.StudentBranch!.value;
console.log(this.StudentBranch!.value);
this.studentservice.updateStudent(this.student.student_id!,this.student).subscribe(
data => {
this.isupdated=true;
this.studentservice.getStudentList().subscribe(data =>{
this.students =data
})
},
error => console.log(error));
}
get StudentName(){
return this.studentupdateform.get('student_name');
}
get StudentEmail(){
return this.studentupdateform.get('student_email');
}
get StudentBranch(){
return this.studentupdateform.get('student_branch');
}
get StudentId(){
return this.studentupdateform.get('student_id');
}
changeisUpdate(){
this.isupdated=false;
}
}
Thank you all
Solution
Variable students
is not an array but an Observable<Student[]>
.
You have to use the async pipe to iterate on the value of the Observable:
<tr *ngFor="let student of students | async">