Декоратор @Input возвращает неопределенное значение в дочернем классе - PullRequest
Новая
       7

Декоратор @Input возвращает неопределенное значение в дочернем классе

0 голосов
/ 28 января 2019

У меня есть два компонента StudentsComponent и UnderGradsComponent.В компоненте «студенты» я создал метод получения имен учеников, которые являются «старшекурсниками» в списке.Затем я отправляю этот список из компонента старшекурсников.Тем не менее, я всегда получаю этот список как неопределенный внутри компонента undergrads.

Вот код для моего StudentComponent 

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

Вот HTML-код для StudentsComponent 

<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>
...