Html 如何以角度显示数组项

我是Angular方面的新手，我创建了一个数组，但我在显示它时遇到了问题

当我显示数组项时，它是空的

write.component.html：

    <div class="data">
        <li> Name: <input type="text" [(ngModel)]="name" placeholder="Please enter Name" ></li>
        <li> Age:<input type="text" [(ngModel)]="age" placeholder="Please enter Age" class="age"></li>
        <li>College:<input type="text" [(ngModel)]="college" placeholder="Please enter College" ></li>
        </div>

    <h2>Student</h2>
    <ul class="details">
      <li>
        <span class="badge" *ngFor="let student of students">  // display array item
          {{student.name}}{{student.age}}{{student.college}}</span>
      </li>
    </ul>

姓名：
年龄：
学院：
学生


//显示数组项
{{student.name}{{student.age}{{{student.college}}

.ts

导出类WriteComponent实现OnInit{
名称：字符串；
年龄：人数；
学院：弦；
学生：数组；//声明数组
}

write-service.ts

import { Injectable } from "@angular/core";


@Injectable()
export class HomeService {

  private students = new Array<any>( //array details
    {
      name:"dwq",
      age:12,
      college:"2321"
    }
  )
}

从“@angular/core”导入{Injectable}；
@可注射（）
出口级家庭服务{
私人学生=新数组（//数组详细信息
{
名称：“dwq”，
年龄:12岁，
学院：“2321”
}
)
}

创建服务后，必须像这样将该服务注入组件

  constructor(private homeServ:HomeService) {  }

然后该服务将在您可以获取数据的组件中可用

  ngOnInit(){
    this.students = this.homeServ.getStudents();
  }

---

演示您注入了服务吗？检查此演示

  ngOnInit(){
    this.students = this.homeServ.getStudents();
  }