javascript - @Input 装饰器在子类中返回未定义

Question

我有两个组件 StudentsComponent 和 UnderGradsComponent。在学生组件中，我创建了一种方法来获取列表中“本科生”学生的姓名。然后我将此列表发送给本科生组件。但是，我总是在本科组件中将该列表作为未定义的。

这是我的 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;
  }
}

这是 StudentsComponent 的 html

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

这是 UndergradsComponent 的代码

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 UnderGradsCompoenent 的代码

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

标签： javascriptangularundefineddecorator