强文本: app.component.html文件:
enter code here
strong text:
Customers.component.ts file:
`````````````````````````````````````````````````````````````````````````````
enter code here
`````````````````````````````````````````````````````````````````````````````
import { Component, OnInit } from '@angular/core';
import {CustomerService} from '../customer.service';
import {Customer} from '../Customer';
@Component({
selector: 'app-customers',
templateUrl: './customers.component.html',
styleUrls: ['./customers.component.css'],
providers:[CustomerService]
})
export class CustomersComponent implements OnInit {
Customers: Customer[];
Customer: Customer;
Customer_firstname:string;
Customer_lastname:string;
phone:string;
constructor(private CustomerService: CustomerService) {this.CustomerService= CustomerService; }
ngOnInit(): void {
this.CustomerService.getCustomers()
.subscribe( Customers =>
this.Customers = Customers);
}
}
``````````````````````````````````````````````````````````````````````````
strong text
Customer.service.ts file:
```````````````````````````````````````````````````````````````````````````
enter code here
````````````````````````````````````````````````````````````````````````
import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import {Customer} from './Customer';
import 'rxjs/add/operator/map';
@Injectable({
providedIn: 'root'
})
export class CustomerService {
constructor(private http:Http) { }
getCustomers()
{
return this.http.get('http://localhost:3000/api/Customers')
.map(res=>res.json());
}
addCustomer(newCustomer)
{
var headers= new Headers();
headers.append('Content-Type','applicatoin/json');
return this.http.post('http://localhost:3000/api/Customer', newCustomer,{headers:headers})
.map(res=>res.json());
}
deleteCustomer(id)
{
return this.http.delete('http://localhost:3000/api/Customer'+id)
.map(res=>res.json());
}
}
``````````````````````````````````````````````````````````````````````````
strong text
app.component.ts file:
```````````````````````````````````````````````````````````````````````````
enter code here
`````````````````````````````````````````````````````````````````````````````
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'OnlineBank app Works!';
}
强文本: 将标记添加到app.component.html文件时,出现此类错误:
enter code here
`````````````````````````````````````````````````````````````````````
ERROR Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:925)
at Module.ɵɵinject (core.js:941)
at Object.XHRBackend_Factory [as factory] (http.js:1445)
at R3Injector.hydrate (core.js:16944)
at R3Injector.get (core.js:16696)
at injectInjectorOnly (core.js:931)
at ɵɵinject (core.js:941)
at injectArgs (core.js:1058)
at Object.factory (core.js:17114)
at R3Injector.hydrate (core.js:16944)
main.ts:12 Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:925)
at Module.ɵɵinject (core.js:941)
at Object.XHRBackend_Factory [as factory] (http.js:1445)
at R3Injector.hydrate (core.js:16944)
at R3Injector.get (core.js:16696)
at injectInjectorOnly (core.js:931)
at ɵɵinject (core.js:941)
at injectArgs (core.js:1058)
at Object.factory (core.js:17114)
at R3Injector.hydrate (core.js:16944)
答案 0 :(得分:0)
我认为您的问题是由于:
@Injectable({
providedIn: 'root'
})
我建议删除providedIn
键,并在providers
的{{1}}部分中声明服务