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]属性在我的模板中使用Angular Material Autocomplete组件，如in the Angular Material documentation所述。每当我在下拉框中选择一个值时，所选值（clientId）就会传递给＆＃39; autoCompleteDisplay＆＃39;功能。那部分工作正常，＆＃39; autoCompleteDisplay＆＃39;在我想要的时候被召唤。

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，甚至还引用了没有问题的其他返回observable的函数，在这种情况下我忽略了这一点以保持帖子的可读性。

当＆＃39; autoCompleteDisplay＆＃39;函数被调用，我收到一个错误：

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

您需要的答案可以在这里找到：Cannot read property - displayWith。问题是您使用displayWith的方式，而不是.ts文件上的注入方式。

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

4 个答案: