Question

我正在尝试使用角度数组显示内容列表。但是，应用程序似乎没有返回任何数据。负载仍然有效，因为其他应用程序确实加载了。

该服务已添加到app.module.ts中。导入不会出现任何错误，表明连接错误。

类别：

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

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

我知道我需要类似于bike.model的html，但我没有得到任何输出，甚至没有对象

Answer 1

我认为您需要将服务作为提供程序添加到组件

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

显示Angular类

1 个答案: