angular 2 ng2-bootstrap：無法讀取null的屬性'樣式'

我正在使用angular2中的ng2-boostrap。我使用webpack，我試圖創建一個引導模式對話框，其中包含一個表單。該表單位於單獨的組件中。如在https://valor-software.com/ng2-bootstrap/#/modals所描述的，我的模塊中我輸入angular 2 ng2-bootstrap：無法讀取null的屬性'樣式'

imports: [ModalModule.forRoot(),...]

這是包含模態對話框我的父組件的代碼：

@Component({ 
    selector: 'new-flex-form', 
    template: require('./new.flex.form.component.html') 
}) 

export class NewFlexFormComponent { 

    form: FormGroup; 

    constructor(fb : FormBuilder, private privateviewContainerRef: ViewContainerRef){ 
     this.form = fb.group({ 
     flex_name : ['', Validators.required], 
     initial_value : ['', Validators.compose([Validators.required, CommonValidators.isNegativeNumber])] 
     }) 
    } 
}

：包含表單

<button type="button" class="btn btn-primary" (click)="smModal.show()"> 
    New form 
</button> 

<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title pull-left">Create new Flex</h4> 
     <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <new-flex-form></new-flex-form> 
     </div> 
    </div> 
    </div> 
</div>

子組件new.flex.form.component.html：

<form [formGroup]="form" class="form-horizontal"> 
    <div class="form-group"> 
    <label for="flex-name" class="col-sm-3">Flex name</label> 
    <div class="col-sm-7"> 
     <input id="component-name" class="form-control" 
      formControlName="flex_name" onFocusHidden /> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="initial-value" class="col-sm-3">Initial value</label> 
    <div class="col-sm-7"> 
     <input id="initial-budjet" class="form-control" 
      formControlName="initial_value" onFocusHidden /> 
    </div> 
    </div> 
</form>

模態對話框效果很好。然而，當我在對該表單的輸入域的一按，我得到以下錯誤：

EXCEPTION: Error in ./NewFlexFormComponent class NewFlexFormComponent - inline template:4:7 caused by: Cannot read property 'style' of null 
ErrorHandler.handleError @ error_handler.js:47 
next @ application_ref.js:272 
schedulerFn @ async.js:82 
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 
SafeSubscriber.next @ Subscriber.js:172 
Subscriber._next @ Subscriber.js:125 
Subscriber.next @ Subscriber.js:89 
Subject.next @ Subject.js:55 
EventEmitter.emit @ async.js:74 
NgZone.triggerError @ ng_zone.js:278 
onHandleError @ ng_zone.js:257 
ZoneDelegate.handleError @ zone.js:236 
Zone.runTask @ zone.js:157 
ZoneTask.invoke @ zone.js:335 
error_handler.js:49 ORIGINAL EXCEPTION: Cannot read property 'style' of null 
ErrorHandler.handleError @ error_handler.js:49 
next @ application_ref.js:272 
schedulerFn @ async.js:82 
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 
SafeSubscriber.next @ Subscriber.js:172 
Subscriber._next @ Subscriber.js:125 
Subscriber.next @ Subscriber.js:89 
Subject.next @ Subject.js:55 
EventEmitter.emit @ async.js:74 
NgZone.triggerError @ ng_zone.js:278 
onHandleError @ ng_zone.js:257 
ZoneDelegate.handleError @ zone.js:236 
Zone.runTask @ zone.js:157 
ZoneTask.invoke @ zone.js:335 
error_handler.js:52 ORIGINAL STACKTRACE: 
ErrorHandler.handleError @ error_handler.js:52 
next @ application_ref.js:272 
schedulerFn @ async.js:82 
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 
SafeSubscriber.next @ Subscriber.js:172 
Subscriber._next @ Subscriber.js:125 
Subscriber.next @ Subscriber.js:89 
Subject.next @ Subject.js:55 
EventEmitter.emit @ async.js:74 
NgZone.triggerError @ ng_zone.js:278 
onHandleError @ ng_zone.js:257 
ZoneDelegate.handleError @ zone.js:236 
Zone.runTask @ zone.js:157 
ZoneTask.invoke @ zone.js:335 
error_handler.js:53 TypeError: Cannot read property 'style' of null 
    at DomRenderer.setElementStyle (dom_renderer.js:235) 
    at DebugDomRenderer.setElementStyle (debug_renderer.js:122) 
    at OnFocusHiddenDirective.onFocus (onfocus.hidden.directive.ts:21) 
    at Wrapper_OnFocusHiddenDirective.handleEvent (/SharedModule/OnFocusHiddenDirective/wrapper.ngfactory.js:33) 
    at CompiledTemplate.proxyViewClass.View_NewFlexFormComponent0.handleEvent_9 (/FlexModule/NewFlexFormComponent/component.ngfactory.js:211) 
    at CompiledTemplate.proxyViewClass.<anonymous> (view.js:408) 
    at HTMLInputElement.<anonymous> (dom_renderer.js:276) 
    at ZoneDelegate.invokeTask (zone.js:265) 
    at Object.onInvokeTask (ng_zone.js:227) 
    at ZoneDelegate.invokeTask (zone.js:264)

出現這種情況僅在第一次刷新頁面後，我點擊。如果我在其中一個輸入字段上單擊兩次或更多次，則錯誤不會從第二次出現。

你知道爲什麼拋出這個錯誤，這是什麼意思？我該如何解決它？

來源

2017-02-26 N. Sola

嘗試：

<form [formGroup]="form" class="form-horizontal"> 
    <div class="form-group"> 
    <label for="flex-name" class="col-sm-3">Flex name</label> 
    <div class="col-sm-7"> 
     <input id="component-name" class="form-control" 
      onFocusHidden 
      [formControl]="form.controls['flex_name']"/> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="initial-value" class="col-sm-3">Initial value</label> 
    <div class="col-sm-7"> 
     <input id="initial-budjet" class="form-control" 
      onFocusHidden 
      [formControl]="form.controls['initial_value']"/> 
    </div> 
    </div> 
</form>

來源

2017-02-26 13:59:20

同樣的事情。我得到完全相同的錯誤 –

找到了原因......問題是指令「onFocusHidden」，這是不正確地在我的代碼引用，這是造成錯誤。現在我刪除它，錯誤消失了。

來源

2017-02-26 19:42:52

angular 2 ng2-bootstrap：無法讀取null的屬性'樣式'

回答

相關問題