如何在 Angular 中修復此錯誤（錯誤 TS2322）

Question

伙計們，我對 Angular 有疑問； 我無法解決此錯誤：

錯誤：src/app/student-list/student-list.component.html:31:42 - 錯誤 TS2322：類型 'Observable<Student[]> | undefined' 不可分配給類型 'any[] | 可迭代 | (可迭代 & 任何[]) | (任何[] & 可迭代) | null | 不明確的'。 類型 'Observable<Student[]>' 不可分配給類型 'any[] | 可迭代 | (可迭代 & 任何[]) | (任何[] & 可迭代) | null | 不明確的'。 類型 'Observable<Student[]>' 不可分配給類型 'any[] & Iterable'。 類型 'Observable<Student[]>' 不可分配給類型 'any[]'。 31 <tr *ngFor="讓學生的學生"> ~~ src/app/student-list/student-list.component.ts:10:16 10 templateUrl: './student-list.component.html', ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 組件StudentListComponent的模板出錯。

其中student-list.component.html (1)和student-list.component.ts (2)文件如下：

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

謝謝你們

Answer 1

可變students不是一個數組，而是一個Observable<Student[]> 。 您必須使用異步 pipe 來迭代 Observable 的值：

 <tr *ngFor="let student of students | async">