Angular 2 viewchild不工作 - 無法讀取屬性nativeElement undefined

我有這個組件叫做multiselect.component，我在.ts文件中訪問它的一個html元素(<select id="category-select">)。Angular 2 viewchild不工作 - 無法讀取屬性nativeElement undefined

multiselect.component.html：

<select id="category-select" multiple class="form-control"> 
    <option value="1">Meat</option> 
    <option value="2">Dairy</option> 
    <option value="3">Confectionary</option> 
    <option value="4">Dessert</option> 
    <option value="7">Baking</option> 
    <option value="6">Grocers</option> 
    <option value="5">Restaurants</option> 
    <option value="8">Condiments</option> 
    <option value="9">beverages</option> 
</select> 
<div class="form-control-icon" id="keywords-icon"></div>

multiselect.component.ts：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'multiselect', 
    templateUrl: 'app/shared/multiselect.component.html', 
    styleUrls: [ 'app/shared/multiselect.component.css' ] 
}) 
export class MultiselectComponent implements OnInit { 
    items = 'one two three'.split(' '); 
    selectedCategories; 
    allSelected; 
    numberOfCategories = 9; 

    ngOnInit() { 
     this.selectedCategories = []; 
     (<any>$("#category-select")).multiselect({ 
      buttonWidth: '100%', 
      buttonContainer: '<div style="height: 34px;" />', 
      buttonClass: 'none', 
      nonSelectedText: "select categories", 
      nSelectedText: ' categories', 
      allSelectedText: "all categories", 
      selectAllNumber: false, 
      includeSelectAllOption: true, 
      disableIfEmpty: true, 
      onSelectAll:() => { 
       this.allSelected = true; 
      }, 
      onInitialized:() => { 

      }, 
      onChange: (option, checked) => { 
       this.changed(); 
      } 
     }); 
    } 

    changed() { 
     this.selectedCategories = []; 
     var self = this; 

     $('#category-select option:selected').each(function() { 
      self.selectedCategories.push(
       <any>($(this).text(), $(this).val()) 
      ) 
     }); 
     console.log(this.selectedCategories); 
     if (this.selectedCategories.length < this.numberOfCategories) { 
      this.allSelected = false; 
     } 
    } 
}

我認爲我訪問它的方式是不好的做法，通過使用jQuery。我認爲它可以通過@viewChild來訪問。

所以我想改變它像這樣（我最初只是擺脫第一的jQuery元素訪問後來將做休息）：

import { Component, OnInit, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'multiselect', 
    templateUrl: 'app/shared/multiselect.component.html', 
    styleUrls: [ 'app/shared/multiselect.component.css' ] 
}) 
export class MultiselectComponent implements OnInit { 
    items = 'one two three'.split(' '); 
    selectedCategories; 
    allSelected; 
    numberOfCategories = 9; 

    @ViewChild('category-select') select; 

    ngOnInit() { 
     this.selectedCategories = []; 
     this.select.nativeElement.multiselect({ 
      buttonWidth: '100%', 
      buttonContainer: '<div style="height: 34px;" />', 
      buttonClass: 'none', 
      nonSelectedText: "select categories", 
      nSelectedText: ' categories', 
      allSelectedText: "all categories", 
      selectAllNumber: false, 
      includeSelectAllOption: true, 
      disableIfEmpty: true, 
      onSelectAll:() => { 
       this.allSelected = true; 
      }, 
      onInitialized:() => { 

      }, 
      onChange: (option, checked) => { 
       this.changed(); 
      } 
     }); 
    } 

    changed() { 
     this.selectedCategories = []; 
     var self = this; 

     $('#category-select option:selected').each(function() { 
      self.selectedCategories.push(
       <any>($(this).text(), $(this).val()) 
      ) 
     }); 
     console.log(this.selectedCategories); 
     if (this.selectedCategories.length < this.numberOfCategories) { 
      this.allSelected = false; 
     } 
    } 
}

我得到這個控制檯錯誤：

> EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in app/find-page/find-form.component.html:0:56 
ORIGINAL EXCEPTION: TypeError: Cannot read property 'nativeElement' of undefined 
ORIGINAL STACKTRACE: 
TypeError: Cannot read property 'nativeElement' of undefined 
    at MultiselectComponent.System.register.context_1.execute.MultiselectComponent.ngOnInit (http://localhost:3000/js/app/shared/Multiselect.component.js:29:32) 
    at DebugAppView._View_FindFormComponent0.detectChangesInternal (FindFormComponent.ngfactory.js:761:90) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12586:18) 
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12691:48) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12612:23) 
    at DebugAppView._View_FindPageComponent0.detectChangesInternal (FindPageComponent.ngfactory.js:41:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12586:18) 
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12691:48) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12612:23) 
    at DebugAppView.AppView.detectChangesInternal (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12597:18) 
ERROR CONTEXT: 
[object Object]

爲什麼我得到那個錯誤？

變爲AfterViewInit後，我現在收到此錯誤：

platform-browser.umd.js:937 Error: Uncaught (in promise): EXCEPTION: Error in app/find-page/find-form.component.html:13:30 
ORIGINAL EXCEPTION: TypeError: Cannot read property 'length' of undefined 
ORIGINAL STACKTRACE: 
TypeError: Cannot read property 'length' of undefined 
    at DebugAppView._View_FindFormComponent0.detectChangesInternal (FindFormComponent.ngfactory.js:890:72) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12586:18) 
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12691:48) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12612:23) 
    at DebugAppView._View_FindPageComponent0.detectChangesInternal (FindPageComponent.ngfactory.js:41:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12586:18) 
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12691:48) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12612:23) 
    at DebugAppView.AppView.detectChangesInternal (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12597:18) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12586:18) 
ERROR CONTEXT: 
[object Object] 
    at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:538:32) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:515:14 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:323:29) 
    at Object.onInvoke (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9245:45) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:322:35) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:216:44) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:571:58 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:356:38) 
    at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9236:45) 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:355:43)

的錯誤似乎是在FindFormComponent。

FindFormComponent只是具有多選（表單填寫，然後將查找產品）的形式。

下面是從FindFormComponent有關HTML利用長度：

<div class="row has-error-text"> 
    <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group" style="height:64px;"> 
     <div style="position: relative; display: inline-block; width: 100%;"> 
      <multiselect #multiselect></multiselect> 
     </div> 
    </div> 
</div> 
<div class="row error-text" [style.display]="multiselect.selectedCategories.length < 1 && submitted ? 'block' : 'none'"> 
    <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 form-group input-group btn-group"> 
     <small>Please select at least 1 category.</small> 
    </div> 
</div>

來源

2016-08-23 BeniaminoBaggins

您需要更改

ngOnInit() { 
    this.selectedCategories = []; 
    this.select.nativeElement.multiselect({

到

ngAfterViewInit() { 
    this.selectedCategories = []; 
    this.select.nativeElement.multiselect({

的nativeElement不可用前視圖被初始化。

來源

2016-08-23 06:41:16

謝謝。它現在有另一個錯誤。無法讀取未定義的屬性長度。也許它是指我的「changed（）」函數中的「長度」。所以我selectedCategries數組的長度。雖然我不確定。我現在要在這個問題上發佈錯誤。 – BeniaminoBaggins

我想不是因爲你把它設置爲'[]'。很難說。你可以請編輯你的問題，並在那裏添加更多的細節（確切的錯誤消息，堆棧跟蹤） –

堆棧跟蹤似乎表明該異常與表單元素有關，但我不知道可能導致它的原因。 –

Angular 2 viewchild不工作 - 無法讀取屬性nativeElement undefined

回答

相關問題