加载数据时出错 类型错误： 无法读取未定义的属性'pipe'

Question

我正在编写一个实时搜索功能，用RxJS填充Angular中自动完成的下拉列表。我收到一些错误，类型错误：无法读取未定义的属性"pipe"。我使用的是Angular 10。代码运行良好，但如果用户删除整个搜索字符串，则会抛出以下错误

TypeError:无法读取未定义的属性"pipe"位于SwitchMapSubscriber.project(创建请求.组件.ts:62(在SwitchMapSubscriber上_next(switchMap.js:30(位于SwitchMapSubscriber.next(Subscriber.js:49(TapSubscriber_next(tap.js:46(点击TapSubscriber.next(Subscriber.js:49(位于DistinctUntilChangedSubscriber_next(distinctUntilChanged.js:50(位于DistinctUntilChangedSubscriber.next(Subscriber.js:49(在DebounceTimeSubscriber.deboundedNext(debounceTime.js:40(在AsyncAction.dispatchNext(debounceTime.js:53(在AsyncAction_执行(AsyncAction.js:51(

我的代码如下

HTML文件

<mat-form-field>
<mat-label>Affected person</mat-label>
<input type="text" id="affectedPerson" formControlName="userName" matInput required [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >
<mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let user of filteredUsers" [value]="user.richFirstName +' ' + user.richFamilyName" 
(onSelectionChange)="selectUser(user)">
<span>{{user.richFirstName}}-{{user.richFamilyName}} ({{user.login}})</span>
</mat-option>
</ng-container>
</mat-autocomplete>
<mat-error *ngIf="form.get('userName').hasError('required')">
A name is required
</mat-error>
</mat-form-field>

TS文件

this.form.get('userName').valueChanges.pipe(debounceTime(this.debounce),distinctUntilChanged(),
tap(() => {
this.errorMessage = "";
this.filteredUsers = [];
this.isLoading = true;
}),
switchMap(value => this.accessRequestService.getPersonList(value)
.pipe(
finalize(() => {
this.isLoading = false
})
)
),catchError(error => {
return throwError(error) ;
})
)
.subscribe(data => {
if (data == undefined) {
this.errorMessage = data['Error'];
this.filteredUsers = [];
} else {
this.errorMessage = "";
this.filteredUsers = data;
}
}, error => {
this.isLoading = false
console.log(error);
this.errorMessage = error.message;
if(error.error!=undefined)
alert(error.error.message);
this.filteredUsers = [];
});
}

<mat-form-field>
<mat-label>Affected person</mat-label>
<input type="text" id="affectedPerson" formControlName="userName" matInput required [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >
<mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let user of filteredUsers" [value]="user.richFirstName +' ' + user.richFamilyName" 
(onSelectionChange)="selectUser(user)">
<span>{{user.richFirstName}}-{{user.richFamilyName}} ({{user.login}})</span>
</mat-option>
</ng-container>
</mat-autocomplete>
<mat-error *ngIf="form.get('userName').hasError('required')">
A name is required
</mat-error>
</mat-form-field>

Answer 1

我们无法用您发布的代码检查两种可能性：任一

this.form.get('userName').valueChanges

或

switchMap(value => this.accessRequestService.getPersonList(value)
.pipe(
finalize(() => {
this.isLoading = false
})
)
),catchError(error => {
return throwError(error) ;
})

为null/未定义。您是否确实检查了组件文件中的第62行(错误消息中指出(？我认为这是你正在使用的服务。你能发布那个代码吗？

注意：不鼓励从模板中调用方法，因为这会导致大量的性能开销：

<mat-error *ngIf="form.get('userName').hasError('required')">
A name is required
</mat-error>

应该是

<mat-error *ngIf="userNameFormControl.errors['required']">
A name is required
</mat-error>