angular - 无法从数据库中获取学生并将其显示在角度前端没有可见错误

Question

<table class="table table-bordered">
          <thead>
            <tr>
              <td>Name</td>
              <td>Profile</td>
              <td>Cgpa Criteria</td>
              <td width="275" align="center">Action</td>
            </tr>
          </thead>
          <tbody>
             <tr  *ngFor="let company of companies">
                <td>{{company.name}}</td>
                <td>{{company.profile}}</td>
                <td>{{company.cgpaCriteria}}</td>
                <td width="275"> 
                    <a class="btn btn-info" routerLink="/showCompany/{{company._id}}">Detail</a> 
                    <a class="btn btn-success"  routerLink="/editCompany/{{company._id}}">Edit</a>
                    <a class="btn btn-info"  routerLink="/matchCriteria/{{company.cgpaCriteria}}/{{company.profile}}">Find Students</a>
                    <a class="btn btn-danger" (click)="deleteCompany(company._id)">Delete</a>
                </td>
             </tr>`enter code here`
          </tbody>
        </table>

这是显示所有公司列表的 company.html 文件。当我们点击查找学生按钮时，这部分是有效的，必须显示符合公司条件的学生。没有错误，但没有显示学生。

    import { Component, OnInit } from '@angular/core';

import {CompService} from '../../comp.service'
import {Company} from '../../company'


@Component({
  selector: 'app-companies',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})
export class CompaniesComponent implements OnInit {

  constructor(
  public compService:CompService 
  ) { }

  ngOnInit() {
   this.getCompanies(); 
  }

  model = new Company();
  companies:Company;

  getCompanies()
  {
    this.compService.getCompanies().subscribe(companies=>{this.companies = companies; 
  }) 
 }

 deleteCompany(id){
 this.compService.deleteCompany(id)
 .subscribe(()=>{
 this.getCompanies()
 })

 }

}

这是包含函数的 Companies.component.ts 文件

<table class="table table-bordered">
          <thead>
            <tr>
              <td>Name</td>
              <td>Department</td>
              <td>Cgpa </td>
              <td width="275" align="center">Action</td>
            </tr>
          </thead>
          <tbody>
             <tr  *ngFor="let student of students">
                <td>{{student.name}}</td>
                <td>{{student.department}}</td>
                <td>{{student.cgpa}}</td>
                <td width="275"> 
                    <a class="btn btn-info" routerLink="/showCompany/{{student._id}}">Register Student</a> 
                    <a class="btn btn-success"  routerLink="/editCompany/{{student._id}}">UnRegister Student</a>
                    <a class="btn btn-info"  routerLink="/matchCriteria/{{company._cgpaCriteria}}/{{company.profile}}">Register Students</a>
                    <a class="btn btn-danger" (click)="deleteCompany(company._id)">Delete</a>
                </td>
             </tr>
          </tbody>
        </table>

这是 register.component.html 文件

    import { Component, OnInit } from '@angular/core';

    import {FormBuilder, FormGroup , Validators} from '@angular/forms';
    import { ActivatedRoute, Params, Router } from '@angular/router';



    import {StudService} from '../../stud.service'
    import {Student} from '../../student'

    @Component({
      selector: 'app-register-student',
      templateUrl: './register-student.component.html',
      styleUrls: ['./register-student.component.css']
    })
    export class RegisterStudentComponent implements OnInit {

      constructor(

      public studService:StudService,
        public route:ActivatedRoute,
         public router:Router
      ) { }


      model = new Student();
      students:Student;

      cgpa = this.route.snapshot.params['cgpa'];
      department = this.route.snapshot.params['department'];


      registerStudents()
      {
      this.studService.getStudentBasis(this.cgpa,this.department)
      .subscribe(student=>{
      this.model = student;
      })

      }
       ngOnInit() {
      this.registerStudents()
      }

    }

this is the registercomponent.ts file which is used when we click on find students

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class StudService {


  constructor(private http:Http) { }

    getStudents()
    {
    return this.http.get("http://localhost:3000/api/students").map(res =>res.json());
    }

    getStudent(id)
    {
    return this.http.get("http://localhost:3000/api/show/"+id).map(res =>res.json());
    }

    addStudent(info)
    {
    return this.http.post("http://localhost:3000/api/registerstudent",info).map(res =>res.json());
    }

    deleteStudent(id)
    {
    return this.http.delete("http://localhost:3000/api/removestudent/"+id).map(res =>res.json());
    }

    updateStudent(id , info)
    {
    return this.http.put("http://localhost:3000/api/updatestudent/"+id,info).map(res =>res.json());
    }

    getStudentBasis(cgpa,department)
    {

    return this.http.get("http://localhost:3000/api/findStudent/"+cgpa+"/"+department).map(res=>res.json());
     }

}

这是包含所有功能的 studService.ts 文件 这是显示公司列表的页面

这是当我们单击查找学生时打开的页面，因为您可以看到没有学生可见，但是当我在 localhost:3000 上运行它时，后端编写的函数有效

标签： angular