angular - 构造函数初始化后未定义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;
  }
}

如Angular Material 文档中所述，我使用 [displayWith] 属性在模板中使用 Angular Material Autocomplete 组件。每当我在下拉框中选择一个值时，所选值 (clientId) 都会传递给“autoCompleteDisplay”函数。该部分工作正常，并且当我想要它时会调用“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，甚至在其他返回 observables 时没有问题的函数中，我在这种情况下省略了这些，以使帖子更具可读性。

当调用“autoCompleteDisplay”函数时，我收到一个错误：

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

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

Answer 1

尝试在 AppModule 中注册服务

Answer 2

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

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

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 文件上的注入。