如何在 Angular 中修复此错误（错误 TS2322）答案

【问题标题】：How to fix this error (error TS2322) in Angular如何在 Angular 中修复此错误（错误 TS2322）
【发布时间】：2021-08-30 11:53:26
【问题描述】：

伙计们，我对 Angular 有疑问；我无法解决此错误：

其中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;  
  }  
}

谢谢大家

【问题讨论】：

标签： angular

【解决方案1】：

变量students 不是一个数组，而是一个Observable<Student[]>。您必须使用异步管道来迭代 Observable 的值：

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

【讨论】：