小编Kri*_*hna的帖子

如何使用 CdkScrollable 检测角度材料 2 自动完成列表上的滚动事件

我试图用cdkScrollableScrollEventmat-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()

这几天我一直在关注这个问题,网上没有找到任何相关信息。

请帮我。

html javascript angular-material2 angular

11
推荐指数
1
解决办法
1410
查看次数

当使用 rxjs 6 在 angular 6 中有新请求时,如何取消正在进行的 HTTP 请求

我在下面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)

javascript rxjs typescript angular

5
推荐指数
2
解决办法
6697
查看次数

如何一次关闭使用angular-materiel打开的所有对话框模式

每当服务器出现错误时,我都会在我的 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)
app.module.ts

@NgModule({
  declarations: [
    DialogComponent,
    ...
  ],
  imports: [
    MatDialogModule,
    BrowserAnimationsModule,
    ...
  ],
  providers: [
      ...
  ],
  entryComponents: [ DialogComponent],
  bootstrap: [AppComponent] …
Run Code Online (Sandbox Code Playgroud)

angular-material angular angular-material-5

4
推荐指数
1
解决办法
3691
查看次数

RxJS 6和Angular 6中发生错误后如何保持可观察的状态

任何人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)

rxjs angular angular6 rxjs6

2
推荐指数
1
解决办法
2329
查看次数

无限滚动用于Angular Material 6中的自动完成

我正在尝试实现角度材料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)

html javascript autocomplete angular-material2 angular

0
推荐指数
1
解决办法
4041
查看次数