我是angular2的新手。 我在控制台日志中收到此异常。我试图搜索处理承诺拒绝，但遗憾的是没有运气。
unhandled Promise rejection: Error in ./CheckboxComponent class CheckboxComponent - inline template:3:2 caused by: Cannot read property 'instance' of undefined ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in ./CheckboxComponent class CheckboxComponent - inline template:3:2 caused by: Cannot …, originalError: TypeError: Cannot read property 'instance' of undefined
at DebugAppView._View_CheckboxComponent0…, context: DebugContext} TypeError: Cannot read property 'instance' of undefined
at DebugAppView._View_CheckboxComponent0.detectChangesInternal (CheckboxComponent.ngfactory.js:293:44)
at DebugAppView.AppView.detectChanges (http://ws1066.intern.orange-raidar.com:9002/main.bundle.js:68350:14)
at DebugAppView.detectChanges (http://ws1066.intern.orange-raidar.com:9002/main.bundle.js:68455:44)
at DebugAppView.AppView.detectViewChildrenChanges (http://ws1066.intern.orange-raidar.com:9002/main.bundle.js:68376:19)
at DebugAppView._View_Table11.detectChangesInternal (Table.ngfactory.js:1300:8)
at DebugAppView.AppView.detectChanges (http://ws1066.intern.orange-raidar.com:9002/main.bundle.js:68350:14)
at DebugAppView.detectChanges (http://ws1066.intern.orange-raidar.com:9002/main.bundle.js:68455:44)
at DebugAppView.AppView.detectContentChildrenChanges (http://ws1066.intern.orange-raidar.com:9002/main.bundle.js:68368:19)
at DebugAppView._View_Table0.detectChangesInternal (Table.ngfactory.js:389:8)
我的 CheckboxComponent
import { Component, OnInit ,
Input,
Output,
EventEmitter} from '@angular/core';
import { CheckboxEvent } from './checkbox.event';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
var CHECKED_COLOR:string = 'rgba(68,138,255,0.87)';
var UNCHECKED_COLOR:string = 'rgba(0,0,0,0.54)';
var DISABLED_COLOR:string = 'grey';
@Component({
selector: 'checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent implements OnInit {
@Input() blockCheck:boolean = false;
@Input() disabled:boolean = false;
@Input() checked: boolean;
@Output() checkedChange: EventEmitter<boolean> = new EventEmitter<boolean>(false);
@Output() check: EventEmitter<CheckboxEvent> = new EventEmitter<CheckboxEvent>(false);
public checkedSVG:SafeHtml;
public uncheckedSVG:SafeHtml;
constructor(sanitizer: DomSanitizer ) {
this.checkedSVG = sanitizer.bypassSecurityTrustHtml(`
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>`);
// style="fill:` + CHECKED_COLOR + `"
this.uncheckedSVG = sanitizer.bypassSecurityTrustHtml(`
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>`);
// style="fill:` + UNCHECKED_COLOR + `"
this.checkbox = (this.checked)? this.checkbox = this.checkedSVG: this.uncheckedSVG;
}
public checkbox: SafeHtml;
public onCheckboxClick(event:any) {
if(this.disabled) {
return;
}
var checked = !this.checked;
this.checked = (this.blockCheck)? this.checked: !this.checked;
this.check.emit(new CheckboxEvent(checked, event));
if(checked === this.checked){
this.setCheckbox();
}
}
private setCheckbox() {
this.checkbox = (this.checked)? this.checkbox = this.checkedSVG: this.uncheckedSVG;
this.checkedChange.emit(this.checked);
}
ngOnInit() {
}
}
复选框component.html
<div>
<edit-dialog
[(open)]="openEdit"
[instance]="editInstance.instance"
[dataFields]="editInstance.dataFields"
(done)="doneEditing($event)"
(cancel)="cancelEditing($event)">
<span headline>Edit instance</span>
</edit-dialog>
<div class="container-fluid">
<!--Table head-->
<div class="table-row header">
<!-- index -->
<div
class="text index"
*ngIf="showIndex && !selectColumns">
No
</div>
<div class="text index clickable"
*ngIf="selectColumns"
(click)="showIndex = !showIndex"
[ngStyle]="{'color': (showIndex)? activeColor: inactiveColor}">
<div style="float: left; margin-right: 0.5em;">No</div>
<div style="float: left;" >
<icon
*ngIf="showIndex"
icon="eye-open"
size="15"
[color]="activeColor" >
</icon>
<icon
*ngIf="!showIndex"
icon="eye-closed"
size="15"
[color]="inactiveColor" >
</icon>
</div>
</div>
<!--visible columns-->
<div
*ngIf="!selectColumns"
class="row-content">
<div
*ngFor="let column of visibleColumns"
class="text clickable"
(click)="changeSorting(column)">
<div style="float: left; margin-right: 1em;">
{{ column.label }}
</div>
<div style="float: left;">
<icon
*ngIf="sorting.column.label === column.label"
[icon]="(sorting.asc)? 'expand-arrow': 'expand-button'"
size="10">
</icon>
</div>
</div>
</div>
<!--on selectColumns -->
<div
*ngIf="selectColumns"
class="row-content">
<div
class="text clickable"
*ngFor="let column of columns"
(click)="column.visible = !column.visible;
updateVisibleColumns()" >
<div
[ngStyle]="{'color': (column.visible)? activeColor: inactiveColor}"
style="float: left; margin-right: 1em;">
{{ column.label }}
</div>
<div style="float: left;" >
<icon
*ngIf="column.visible"
icon="eye-open"
size="15"
[color]="activeColor" >
</icon>
<icon
*ngIf="!column.visible"
icon="eye-closed"
size="15"
[color]="inactiveColor" >
</icon>
</div>
</div>
</div>
<!-- last columns for actions-->
<div class="text icon" *ngIf="editable">
</div>
<div class="text index" *ngIf="selectable">
<div>
<span
[title]="'selected/all' + ((selectMax > 0)? '/max. selectable' : '')">
{{ selected.size | delimit }}/{{ data.length | delimit}}{{(selectMax > 0)? '/'+selectMax: ''}}
</span>
<br>
<checkbox [checked]="allSelected" (checkedChange)="toggleSelectAll($event)"></checkbox>
</div>
</div>
</div>
<!--Table body-->
<div (mouseleave)="dragEnd()">
<!-- EasterEgg-->
<img src="./app/images/page-zero.gif" *ngIf="startAt < 0" style="width: 80%; height: 80%;" class="text"/>
<!-- EasterEggEnd-->
<!-- Table data-->
<div *ngFor="
let set of tableData
| sort: ((sorting.asc)? 'asc': 'desc'): ['dataSet', sorting.column.value]
| range: startAt: visibleEntries
let i = index;"
(mouseover)="mouseOver(set)"
(mouseup)="dragEnd()"
[class]="getEvenClass(i)"
(dblclick)="toggleWrap(tableData, set, $event)">
<!-- Index -->
<div class="text index" *ngIf="showIndex">
{{ i + 1 + startAt }}
</div>
<!-- Data according to columns-->
<div
class="row-content" >
<div
[class]="'text ' + set.wrap"
*ngFor="let column of visibleColumns">
<a
*ngIf="column.isLink()"
[href]="set.dataSet.links[column.value]"
[innerHTML]="set.dataSet[column.value] | highlight:highlight | safeHTML">
</a>
<span *ngIf="column.isNumber()"
[innerHTML]="set.dataSet[column.value] |
delimit: 2: 'de'
| highlight:highlight | safeHTML">
</span>
<span *ngIf="column.isText()"
[innerHTML]="set.dataSet[column.value]
| highlight:highlight | safeHTML">
</span>
<span *ngIf="column.isDropdown()"
[innerHTML]="column.getValue(set.dataSet[column.value])
| highlight:highlight | safeHTML">
</span>
</div>
</div>
<!-- actions columns-->
<div class="text icon icon-button" *ngIf="editable">
<icon
icon="create-new-pencil-button"
size="20"
color="black"
(click)="edit(set.dataSet)">
</icon>
</div>
<div class="text index" *ngIf="selectable">
<checkbox
[checked]="set.selected"
(check)="selectedDataSet(set, $event)"
[blockCheck]="true"
(mousedown)="dragStart(set)"
[disabled]="(!set.selected && maxSelected)"
onmousedown="if (event.preventDefault) event.preventDefault()">
</checkbox>
</div>
</div>
</div>
</div>
</div>
我不知道如何调试这些问题。
编辑实例为空，但我无法理解原因。 我在控制台日志中收到此异常。我试图搜索处理承诺拒绝，但遗憾的是没有运气。 任何帮助将不胜感激。
答案 0 :(得分：2)
无法读取未定义的属性实例。
这意味着editInstance未定义且未定义没有实例属性。
editInstance.instance