在ngOnInit方法調用中未定義的TypeError進行驗證

Question

我在屏幕上有一個輸入，僅當filter_type與描述相同時才顯示它，每次我第一次加載頁面時filter_type沒有值，然后輸入就不會顯示在屏幕上，因為我只是要顯示何時filter_type與描述相同。

因為@ViewChild不會填充頁面上的元素，所以發生了錯誤。我需要處理此問題，因此當filter_type與描述不同時，不會發生任何錯誤。

這是我寫的代碼：

mycomponent.ts：

@ViewChild('filter') filter: ElementRef;

ngOnInit() {
    // I tried to validate this way but there is an error anyway ...
    if (typeof this.filter.nativeElement !== 'undefined') {
        // The error occurs here
        Observable.fromEvent(this.filter.nativeElement, 'keyup')
            .debounceTime(150)
            .distinctUntilChanged()
            .subscribe(() => {
                if (!this.dataSource) {
                    return;
                }
                this.dataSource.filter = this.filter.nativeElement.value;

            });
    }
}

mycomponent.html：

<mat-form-field *ngIf="filter_type === 'description'" floatPlaceholder="never" fxFlex="1 0 auto">
    <input id="search" matInput #filter placeholder="Search">
</mat-form-field>

僅當filter_type是描述以過濾數組中的對象的描述時，如何隱藏和顯示輸入而更新this.dataSource.filter時不會發生錯誤？

啟動時發生的錯誤：

Uncaught TypeError: Cannot read property 'nativeElement' of undefined
    at eval (eval at mycomponent.ngOnInit (mycomponent.component.ts:19), <anonymous>:1:13)
    at ExtratoComponent.ngOnInit (mycomponent.component.ts:111)
    at checkAndUpdateDirectiveInline (core.js:12369)
    at checkAndUpdateNodeInline (core.js:13893)
    at checkAndUpdateNode (core.js:13836)
    at debugCheckAndUpdateNode (core.js:14729)
    at debugCheckDirectivesFn (core.js:14670)
    at Object.eval [as updateDirectives] (mycomponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)
    at checkAndUpdateView (core.js:13802)

Answer 1

您嘗試訪問的@ViewChild（）在* ngIf內，因此它並不總是存在。

使用@ViewChildren（）代替。 它將為您提供可觀察到的“當前”匹配元素。

例：

@ViewChildren('filter') filter: QueryList<any>
ngOnInit () {
  this.filter.changes.subscribe(val => {
    console.log(val)
  })
}

請注意，使用@ViewChildren（）時，對象類型為QueryList<> 。 因此，您必須以不同的方式處理它。 有關@ViewChildren（）的信息，請參閱文檔。

Answer 2

似乎在觸發this.filter時， this.filter是未定義的 ，因此它沒有nativeElement屬性。

要消除該錯誤，您必須將if替換為：

if (typeof this.filter !== 'undefined') {
   // your logic here
}

但這意味着每當未定義this.filter ，Observable都不會被附加，因此在某些情況下，您必須找到另一個事件來附加它（可能確保它沒有被附加兩次）。

Answer 3

我認為您可能想利用Angular 2中的表單控件功能 。 您可以創建一個FormControl對象，該對象可以管理監視值的更改並訂閱該對象。 您將模板<input>連接起來以使用FormControl對象。 我整理了一個簡單的Plunker來展示這種行為。

mycomponent.ts：

初始化表單控件，並連接代碼以處理更改。

searchControl = new FormControl();

ngOnInit() {
    this.searchControl.valueChanges
        .debounceTime(150)
        .distinctUntilChanged()
        .subscribe(() => {
            if (!this.dataSource) {
                return;
            }
            this.dataSource.filter = this.filter.nativeElement.value;

        });
}

mycomponent.html：

將<input>連接到窗體控件。

<input ... [formControl]="searchControl">