angular - 无法将我的服务数据绑定到 Angular 中的组件

Question

    =====app.module.ts=====
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { StudentListComponent } from './student-list/student-list.component';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentService } from './student.service';

@NgModule({
  declarations: [
    AppComponent,
    StudentListComponent,
    StudentDetailsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [StudentService],
  bootstrap: [AppComponent]
})
export class AppModule { }


=====app.component.html=====
<app-student-list></app-student-list>
<app-student-details></app-student-details>


=====app.component.html=====
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FirstProject';
}



=====student-details.component.ts=====
import { Component, OnInit } from '@angular/core';

import { StudentService } from '../student.service';

@Component({
  selector: 'app-student-details',
  template: `
    <p>
      student-details works!
    </p>
  `,
  styles: [
  ]
})
export class StudentDetailsComponent implements OnInit {
  public students:any[]=[];
  constructor(private _stdService:StudentService) { }

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

}


=====student-list.component.ts=====
import { Component, OnInit } from '@angular/core';

import { StudentService } from '../student.service';

@Component({
  selector: 'app-student-list',
  template: `
    <p>
      student-list works!
    </p>
  `,
  styles: [
  ]
})
export class StudentListComponent implements OnInit {
  public students:any[]=[];
  constructor(private _stdService:StudentService) { }

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

}



=====student.service.ts=====
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StudentService {
getStudents(){
  return [
    {  "id":1,  "name":"Rama",  "course":"Angular"  },
    {  "id":2,  "name":"Sita",  "course":"React"  },
    {  "id":3,  "name":"Laxman",  "course":"Vue"  },
    {  "id":4,  "name":"Ravana",  "course":"Bootstrap"  }
  ];
}
  constructor() { }
}

说明：- 我无法将服务数据绑定到组件

附加下面的参考图像以输出 输出图像

我无法将服务数据绑定到组件。我无法将服务数据绑定到组件。我无法将服务数据绑定到组件。我无法将服务数据绑定到组件。我无法将服务数据绑定到组件。

标签： angularangular-material