构造函数初始化后未定义的 Angular 6 服务

Question

我有一个服务(ClientProfileService(通过构造函数注入到我的组件中，如下所示：

import { ClientProfileService } from '@app/services/client-profile/client-profile.service';
@Component({
selector: 'app-add-transaction',
templateUrl: './add-transaction.component.html',
styleUrls: ['./add-transaction.component.scss']
})
export class AddTransactionComponent implements OnInit, AfterViewInit {
... 
...
constructor(
private clientProfileService: ClientProfileService
) { }
...
...
public autoCompleteDisplay(clientId?: string): string | undefined {
if (clientId && clientId.trim() !== '') {
// next line produces the error
let profile: IDetailedClientProfile = this.clientProfileService.findClientProfile(clientId);
if (profile) {
return profile.ClientName;
}
}
return undefined;
}
}

我正在使用 [displayWith] 属性在我的模板中使用角度材质自动完成组件，如角度材质文档中所述。 每当我在下拉框中选择一个值时，所选值(clientId(都会传递给"autoCompleteDisplay"函数。 该部分工作正常，并且在需要时调用"自动完成显示"。

ClientProfileService的定义如下：

@Injectable({
providedIn:'root'
})
export class ClientProfileService {
private teamClientListSubject: BehaviorSubject<IDetailedClientProfile[]> = new BehaviorSubject(null);
constructor(
private http: HttpClient
) { }
public findClientProfile(clientId: string): IDetailedClientProfile {
let profile: IDetailedClientProfile = this.teamClientListSubject.value.filter(x => x.ClientId === clientId)[0];
return profile;
}
}

我已经在多个组件中引用了服务中的 BehaviorSubject，甚至是其他返回可观察量而没有问题的函数，在这种情况下我省略了这些函数，以使帖子更具可读性。

调用"自动完成显示"函数时，我收到错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'findClientProfile' of undefined

因此，在这个特定点上，组件中未定义ClientProfileService，但为什么呢？ 我已经使用这种完全相同的方法在应用程序的其他几个区域初始化了此服务，没有问题。

Answer 1

我认为你的导入是错误的，应该是

import { ClientProfileService } from './services/client-profile/client-profile.service';

Answer 2

尝试在AppModule中注册服务

Answer 3

确保将服务添加到 app.module.ts 中的提供程序：

import { ClientProfileService } from '@app/services/client-profile/client-profile.service';
...
@NgModule({ 
declarations: [ ... ],
imports: [ ... ],
providers: [ ..., ClientProfileService],
bootstrap: [AppComponent] 
}) export class AppModule { }

Answer 4

您需要的答案可以在这里找到：无法读取属性 - displayWith。 问题在于您使用 displayWith 的方式，而不是在 .ts 文件上的注入。