我试图用cdkScrollable听ScrollEvent的mat-autocomplete。
我已经实现了如下代码片段。
<mat-form-field>
<input matInput placeholder="Notebook Page" formControlName="notebookPage" [matAutocomplete]="NBPageAutocomplete" >
</mat-form-field>
<mat-autocomplete #NBPageAutocomplete="matAutocomplete" cdkScrollable >
<mat-option *ngFor="let option of suggestedNBPageNames" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>Run Code Online (Sandbox Code Playgroud)
constructor(public scroll: ScrollDispatcher) {}
ngAfterViewInit() {
this.scroll.scrolled().subscribe((data: CdkScrollable) => {
console.log(data);
//make an HTTP call when it reaches to the end, to add some more data
});
}Run Code Online (Sandbox Code Playgroud)
订阅后事件未触发this.scroll.scrolled()。
这几天我一直在关注这个问题,网上没有找到任何相关信息。
请帮我。
我在下面RxnsSearchService,并RxnsSearchHitCountService在我的应用程序,两个HTTP服务。
使用forkJoin下面的代码处理两个请求。
constructor(
private rxnsSearchService: RxnsSearchService,
private rxnsSearchHitCountService: RxnsSearchHitCountService
) { }
const rxnsObservable: Observable<Array<any>> = this.rxnsSearchService.getReactions(this.searchParams, filters);
const headCountObservable: Observable<number> = this.rxnsSearchHitCountService.getHitCount(this.searchParams, filters);
forkJoin([rxnsObservable, headCountObservable]).pipe().subscribe((results) => { //handling results
},
error => {
console.log(error);
});Run Code Online (Sandbox Code Playgroud)
每当有新请求出现时,我都想取消正在进行的旧请求。任何人都可以帮助我,使其解决吗?
export class RxnsSearchService {
sub: Subject<any> = new Subject();
constructor(private httpClient: HttpClient) {}
getReactions(params: Params, offset: number, perPage: number, filters: any) {
const body = {
filters: filters,
query: params.query
};
return this.httpClient.post(environment.rxnsSearch, body).pipe(
map((response: Array<any>) => …Run Code Online (Sandbox Code Playgroud)每当服务器出现错误时,我都会在我的 angular 应用程序中使用 angular material dialogcomponent来打开一个对话框。
如果同时出现多个错误,它会打开多个对话框,这对我来说很好。我想使用closeAll方法一次关闭所有对话框。
当尝试使用closeAll获取此错误的方法时:
error TS2339: Property 'closeAll' does not exist on type 'MatDialogRef<DialogComponent, any>'.Run Code Online (Sandbox Code Playgroud)
我如何打开对话框:
constructor(private dialog: MatDialog) {}
const dialogRef = this.dialog.open(DialogComponent, {
width: "500px",
height: "500px",
disableClose: true,
hasBackdrop: true,
data: { name: this.name, animal: this.animal }
});Run Code Online (Sandbox Code Playgroud)
对话框组件.ts
onClose(): void {
this.dialogRef.closeAll();
}Run Code Online (Sandbox Code Playgroud)
@NgModule({
declarations: [
DialogComponent,
...
],
imports: [
MatDialogModule,
BrowserAnimationsModule,
...
],
providers: [
...
],
entryComponents: [ DialogComponent],
bootstrap: [AppComponent] …Run Code Online (Sandbox Code Playgroud)任何人this._getReactions$.next()都this.http.get(...)可以在出现错误时不工作的情况下提供帮助。我想保持可观察状态以接受下一个输入。
private _getReactions$: Subject<any> = new Subject();
constructor() {
this._getReactions$
.pipe(
switchMap(() => {
return this.http.get(...)
// http request
}),
catchError(error => {
console.log(error);
return empty();
})
)
.subscribe(data => {
console.log(data)
//results handling
});
}Run Code Online (Sandbox Code Playgroud)
onClick() {
this._getReactions$.next();
}Run Code Online (Sandbox Code Playgroud)
我正在尝试实现角度材料6中自动完成功能的无限滚动。我的场景很简单,我有一个启用了自动完成功能的输入文件。当用户键入内容时,我将使用输入字段中的文本进行HTTP调用,以将结果显示为建议。但我想只显示25个建议,如果算上结果超过25时,用户滚动到我想要的底部多加一个25像这样在角2
我无法在网上找到。
请指教或帮助我。先感谢您。
<mat-form-field>
<input matInput placeholder="Experiment Name" formControlName="experimentName" [matAutocomplete]="expNamesAutocomplete">
</mat-form-field>
<mat-autocomplete #expNamesAutocomplete="matAutocomplete">
<mat-option *ngFor="let option of suggestedExpNames" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>Run Code Online (Sandbox Code Playgroud)