Question

该应用程序已实现以下组件

客户overview.component.ts

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
import { DataSource } from '@angular/cdk'

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromEvent';

import { CustomerOverviewService, CustomerOverviewDataSource } from './../../services/customer-overview.service'

@Component({
    selector: 'customer-overview-component',
    templateUrl: 'customer-overview.component.html',
    styleUrls: ['./customer-overview.component.css'],

    providers: [CustomerOverviewService]
})
export class CustomerOverviewComponent implements OnInit {
    private _dataService: CustomerOverviewService;
    public dataSource: CustomerOverviewDataSource | null;

    @ViewChild('filter') filter: ElementRef;

    constructor(private dataService: CustomerOverviewService, private router: Router) {
        this._dataService = dataService;
        this.dataSource = new CustomerOverviewDataSource(this._dataService);
    }

    ngOnInit() {
        Observable.fromEvent(this.filter.nativeElement, 'keyup')
                .debounceTime(150)
                .distinctUntilChanged()
                .subscribe(() => {
                    if (!this.dataSource) { return; }
                    this.dataSource.filter = this.filter.nativeElement.value;
                });
    }
}

路由本身定义如下

app.module.client.ts

    const appRoutes: Routes = [
        {
            path: '',
            component: HomeComponent
        }
        {
            path: 'customer',
            component: CustomerOverviewComponent
        }
    ]


    @NgModule({
        bootstrap: sharedConfig.bootstrap,
        declarations: sharedConfig.declarations,
        imports: [
        RouterModule.forRoot(
                appRoutes,
                { enableTracing: true }),
            BrowserModule,
            FormsModule,
            HttpModule,
            BrowserAnimationsModule,
            SharedModule,

        ],
        providers: [
            CustomerOverviewService,
            ...sharedConfig.providers,
            { provide: 'ORIGIN_URL', useValue: location.origin }
        ]
    })

组件工作正常，没有任何错误通过控制台或通过网络协议获得500。但是，当我使用localhost / customer的直接链接时，我收到以下错误。

处理请求时发生未处理的异常。

异常：调用节点模块失败，错误：错误：未捕获（在承诺中）：TypeError：无效的事件目标 TypeError：无效的事件目标在Function.FromEventObservable.setupSubscription

我尝试在NgAfterViewInit和构造函数中使用 Observable.FromEvent ，但这些都没有帮助。我在这里缺少什么？

Answer 1

请将您的订阅移至ngAfterVewInit挂钩。

事实是@ViewChild('filter') filter: ElementRef;在ngAfterVewInit之前但在ngOnInit之后初始化。因此，您将未定义的值放入fromEvent运算符。

ngAfterViewInit() {
    console.log(this.searchField);
    Observable.fromEvent(this.searchField.nativeElement, 'input').
    map((e: any) => e.target.value).
    filter(text => text.length > 2).
    debounceTime(1000).
    distinctUntilChanged().subscribe(res => console.log(res));
}

工作正常。

TypeError：无效的事件目标 - 但只是使用直接路由

1 个答案: