Javascript @子类中返回未定义的输入装饰器

我有两个部分，学生部分和本科生部分。在students组件中，我创建了一个方法来获取列表中“本科生”的姓名。然后我把这份名单发给本科生。然而，我总是在本科生部分中得到未定义的列表

这是我的StudentsComponent的代码

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

@Component({
  selector: "app-students",
  templateUrl: "./students.component.html",
  styleUrls: ["./students.component.css"]
})
export class StudentsComponent implements OnInit {
  students = [
    { name: "Marwa", level: "undergrad" },
    { name: "Heba", level: "undergrad" },
    { name: "Amal", level: "postgrad" }
  ];

  public undergradsList = this.undergrads();
  constructor() {}

  ngOnInit() {
    this.undergrads();
    console.log(this.undergrads);
  }
  undergrads() {
    var Arrayres = new Array();
    for (var i = 0; i < this.students.length; i++) {
      if (this.students[i].level === "undergrad") {
        Arrayres.push(this.students[i].name);
      }
    }
    console.log(Arrayres);
    return Arrayres;
  }
}

<app-under-grads *ngIf="undergradsList" [studentList]="undergradsList">
</app-under-grads>

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

@Component({
  selector: "app-under-grads",
  templateUrl: "./under-grads.component.html",
  styleUrls: ["./under-grads.component.css"]
})
export class UnderGradsComponent implements OnInit {
  @Input() public studentList;
  constructor() {}

  ngOnInit() {
    console.log(this.studentList);
  }
}

最后，这里是我的HTML本科生组件的代码

<h2>UnderGrads</h2>
<div>
  <ul>
    <li *ngFor="let x of studentList">{{ x }}</li>
  </ul>
</div>

本科生

{{x}

能否提供更多详细信息，例如grads.component.html下的

的实际内容？@abos我编辑了我的问题，我创建了一个stackblitz，无法复制此问题@abos我的*ngFor有问题吗？我觉得这是导致死亡的原因problem@abos另外，为什么在app.component.html中为学生而不是本科生使用class标记