如何在Angular中显示数组项答案

【问题标题】：How to display array item in Angular如何在Angular中显示数组项
【发布时间】：2020-06-05 10:22:34
【问题描述】：

我是 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>

.ts

export class WriteComponent implements OnInit {
  name : string;
  age : number;
  college : string;

students : Array<any>; // declare array

}

写服务.ts

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


@Injectable()
export class HomeService {

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

【问题讨论】：

你注入服务了吗？
查看此演示 stackblitz.com/edit/angular-orrsud

标签： html arrays angular

【解决方案1】：

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

  constructor(private homeServ:HomeService) {  }

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

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

demo ?

如果服务没有依赖，你可以从服务中移除可注入装饰器

阅读有关角度服务的更多信息?her

【讨论】：