如何解决为什么我在Angular应用程序中遇到此错误？未被捕获承诺：NullInjectorError
我不太喜欢Angular和PrimeNG，并且在尝试复制此PrimeNG表展示示例时发现了以下问题（此页面的“源”选项卡中提供了代码）：https://www.primefaces.org/primeng/showcase/#/table
基本上，我尝试将这段代码放入应用程序的组件中（然后将其调整到用例中）。
所以我有这个组件类：
import { Component,OnInit,ViewChild } from '@angular/core';
import { Customer,Representative } from './customer';
import { Table } from 'primeng';
import { CustomerService } from './customerservice';
@Component({
selector: 'app-gestione-ordini',templateUrl: './gestione-ordini.component.html',styleUrls: ['./gestione-ordini.component.css']
})
export class GestioneOrdiniComponent implements OnInit {
customers: Customer[];
selectedCustomers: Customer[];
representatives: Representative[];
statuses: any[];
loading: boolean = true;
@ViewChild('dt') table: Table;
constructor(private customerService: CustomerService) { }
ngOnInit() {
this.customerService.getCustomersLarge().then(customers => {
this.customers = customers;
this.loading = false;
});
this.representatives = [
{name: "Amy Elsner",image: 'amyelsner.png'},{name: "Anna Fali",image: 'annafali.png'},{name: "Asiya Javayant",image: 'asiyajavayant.png'},{name: "Bernardo Dominic",image: 'bernardodominic.png'},{name: "Elwin Sharvill",image: 'elwinsharvill.png'},{name: "Ioni Bowcher",image: 'ionibowcher.png'},{name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},{name: "Onyama Limba",image: 'onyamalimba.png'},{name: "Stephen Shaw",image: 'stephenshaw.png'},{name: "XuXue Feng",image: 'xuxuefeng.png'}
];
this.statuses = [
{label: 'Unqualified',value: 'unqualified'},{label: 'Qualified',value: 'qualified'},{label: 'New',value: 'new'},{label: 'Negotiation',value: 'negotiation'},{label: 'Renewal',value: 'renewal'},{label: 'Proposal',value: 'proposal'}
]
}
onActivityChange(event) {
const value = event.target.value;
if (value && value.trim().length) {
const activity = parseInt(value);
if (!isNaN(activity)) {
this.table.filter(activity,'activity','gte');
}
}
}
onDateSelect(value) {
this.table.filter(this.formatDate(value),'date','equals')
}
formatDate(date) {
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day > 10) {
day = '0' + day;
}
return date.getFullYear() + '-' + month + '-' + day;
}
onRepresentativeChange(event) {
this.table.filter(event.value,'representative','in')
}
}
这是上一组件类中使用的 CustomerService 服务：
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Customer } from './customer';
@Injectable()
export class CustomerService {
constructor(private http: HttpClient) { }
getCustomersSmall() {
return this.http.get<any>('assets/showcase/data/customers-small.json')
.toPromise()
.then(res => <Customer[]>res.data)
.then(data => { return data; });
}
getCustomersMedium() {
return this.http.get<any>('assets/showcase/data/customers-medium.json')
.toPromise()
.then(res => <Customer[]>res.data)
.then(data => { return data; });
}
getCustomersLarge() {
return this.http.get<any>('assets/showcase/data/customers-large.json')
.toPromise()
.then(res => <Customer[]>res.data)
.then(data => { return data; });
}
getCustomersXLarge() {
return this.http.get<any>('assets/showcase/data/customers-xlarge.json')
.toPromise()
.then(res => <Customer[]>res.data)
.then(data => { return data; });
}
}
这是此组件的相关html视图页面：
<div class="card">
<p-table #dt [value]="customers" [(selection)]="selectedCustomers" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
[rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
[paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
<ng-template pTemplate="caption">
<div class="table-header">
List of Cars
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')" placeholder="Global Search" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
<th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
<th pSortableColumn="status">Status <p-sortIcon field="status"></p-sortIcon></th>
<th pSortableColumn="activity">Activity <p-sortIcon field="activity"></p-sortIcon></th>
<th style="width: 8rem"></th>
</tr>
<tr>
<th>
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>
<input pInputText type="text" (input)="dt.filter($event.target.value,'name','startsWith')" placeholder="Search by Name" class="p-column-filter">
</th>
<th>
<input pInputText type="text" (input)="dt.filter($event.target.value,'contains')" placeholder="Search by Country" class="p-column-filter">
</th>
<th>
<p-multiSelect [options]="representatives" placeholder="All" (onChange)="onRepresentativeChange($event)" styleClass="p-column-filter" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option">
<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.value.image}}" width="32" style="vertical-align: middle" />
<span class="p-ml-1">{{option.label}}</span>
</div>
</ng-template>
</p-multiSelect>
</th>
<th>
<p-calendar (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('','equals')" [showButtonBar]="true" styleClass="p-column-filter" placeholder="Registration Date" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>
</th>
<th>
<p-dropdown [options]="statuses" (onChange)="dt.filter($event.value,'status','equals')" styleClass="p-column-filter" placeholder="Select a Status" [showClear]="true">
<ng-template let-option pTemplate="item">
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
</ng-template>
</p-dropdown>
</th>
<th>
<input pInputText type="text" (input)="onActivityChange($event)" placeholder="Minimum" class="p-column-filter" >
</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr class="p-selectable-row">
<td>
<p-tableCheckbox [value]="customer"></p-tableCheckbox>
</td>
<td>
<span class="p-column-title">Name</span>
{{customer.name}}
</td>
<td>
<span class="p-column-title">Country</span>
<img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text">{{customer.country.name}}</span>
</td>
<td>
<span class="p-column-title">Representative</span>
<img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="image-text">{{customer.representative.name}}</span>
</td>
<td>
<span class="p-column-title">Date</span>
{{customer.date}}
</td>
<td>
<span class="p-column-title">Status</span>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td>
<span class="p-column-title">Activity</span>
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td>
<td style="text-align: center">
<button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="8">No customers found.</td>
</tr>
</ng-template>
</p-table>
</div>
它可以正确编译，但是问题是，当我运行我的应用程序而不是获取期望的表时，我正在获取此错误消息：
core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[CustomerService -> CustomerService -> CustomerService]:
NullInjectorError: No provider for CustomerService!
NullInjectorError: R3InjectorError(AppModule)[CustomerService -> CustomerService -> CustomerService]:
NullInjectorError: No provider for CustomerService!
at NullInjector.get (core.js:1085)
at R3Injector.get (core.js:16955)
at R3Injector.get (core.js:16955)
at R3Injector.get (core.js:16955)
at NgModuleRef$1.get (core.js:36329)
at Object.get (core.js:33972)
at getOrCreateInjectable (core.js:5848)
at Module.ɵɵdirectiveInject (core.js:21103)
at NodeInjectorFactory.GestioneOrdiniComponent_Factory [as factory] (gestione-ordini.component.ts:11)
at getNodeInjectable (core.js:5993)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41632)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
为什么会出现此错误？可能是什么问题？
解决方法
尝试添加
@Injectable({provided in: "root"})
到您的服务班级。这会将其包括在根注入器中，并使它可用于您应用程序中的任何实体。
或者，如果仅希望将此服务提供给部分应用程序，则需要将其包含在Provides数组的NgModule中
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。