클래스에 정의 된 배열 표시 각도

Question

각도로 배열을 사용하여 콘텐츠 목록을 표시하려고합니다. 그러나 앱이 데이터를 반환하지 않는 것 같습니다. 다른 앱이로드되기 때문에로드가 계속 작동합니다.

서비스가 app.module.ts에 추가되었습니다. 가져 오기에서 잘못된 연결을 나타내는 오류가 발생하지 않습니다.

등급 :

export class Bike 
{ 
    id: number; 
    model: string; 
    manufacturer: string; 
} 

앱 component.html :

<h1> {{title}} </h1> 
<hr /> 

<app-bike></app-bike> 

bikes.service.ts :

import { Injectable } from '@angular/core'; 
import { Bike } from '../bike'; 


@Injectable() 
export class BikesService 
{ 
getBikes(): Bike[] 
{ 

    //return 
    return [ 
     { id: 1, model: 'CBR250R', manufacturer: 'Honda' }, 
     { id: 2, model: 'CBR150R', manufacturer: 'Honda' }, 
     { id: 3, model: 'Ninja250R', manufacturer: 'Kawasaki' }, 
     { id: 4, model: 'CBR1000R', manufacturer: 'Honda' }, 
     { id: 5, model: 'Ninja1000RR', manufacturer: 'Kawasaki' } 
    ]; 
} 

} 

bikes.component.ts :

import { Component, OnInit } from '@angular/core'; 
import { BikesService } from '../services/bikes.service'; 


@Component({ 
selector: 'app-bike', 
templateUrl: './bike.component.html', 
styleUrls: ['./bike.component.css'] 
}) 
export class BikeComponent implements OnInit 
{ 
//properties 
title: string = "Bikes"; 
bikes:any[] 

//constructor 
constructor(bikesService: BikesService) 
{ 
    //init prop 
    this.bikes = bikesService.getBikes(); 
} 


//lifeCycle 
ngOnInit() 
{ 
} 

} 

bike.component.html :

<div *ngFor="let bike of bikes">{{bike}}</div> 

나는 내가 HTML에 대한 bike.model 유사한 일을해야 알아,하지만 난 출력을 얻을하지 않습니다조차 난 당신이 필요하다고 생각

Answer 1

객체 구성 요소에 공급자로 서비스를 추가하려면

@Component({ 
    selector: 'app-bike', 
    templateUrl: './bike.component.html', 
    styleUrls: ['./bike.component.css'], 
    providers: [BikesService] 
})