2
この問題を見てください。角2 - エラー：最大呼び出しスタックサイズを超えました
仮定：
のI /編集テストケースを追加するためのフォームを持つコンポーネントを持っています。コンポーネントは、選択されたテストケースを第2のパラメータとして、3つの異なるモード（最初のパラメータ）（0 - 空の形式、1 - 編集モード、2 - 表示モード（モードが0でテストケースオブジェクトが定義されている場合、このオブジェクトは新しいテストケースの親になります）モードが1の場合、選択されたテストケースが編集テストケースになり、モードが2の場合、テストケースが表示されますテストケースオブジェクトが未定義の場合、新しいテストケースには親オブジェクトがないため、ツリーの一番上に表示されます）
フォームにはnameとfeature-flagの2つのフィールドがあります。ドロップダウンしてフォームに追加すると、ツリー構造になります。
エラーの再現：
テストケースを選択したり、新しいテストケースを追加したり、テストケースを編集したり、いくつかのフラグを追加したり、フォームを閉じたり、新しいフォームをN回以上開いたりすると、エラーが発生します。私は自分のコード内の任意のrecuret関数呼び出しを持っていない
エラーテキスト：
コード：
テストcase.component.ts：
/**
*
*/
public ngOnInit() {
this.testCasesService.getAll().subscribe(
records => {
this.testCases = this.testCasesService.asTree(records, { parent: true, expanded: true })
},
err => {
console.log(err)
}
)
}
/**
* Opens test case form
*/
private openTestCaseForm(parent, mode?) {
if(!parent)
this.selectedNode = undefined;
if(this.mode != mode)
this.mode = mode;
this.addNewTestCaseForm = true
}
test-case.template.html
<div style="float: left; width: 100%;">
<p>
<p-toolbar>
<div class="ui-toolbar-group-left">
<button (click)="openTestCaseForm(false)" pButton type="button" label="New Test Case" icon="fa-plus"></button>
<button *ngIf="!selectedNode" [disabled]="true" pButton type="button" label="New Child Test Case" icon="fa-plus"></button>
<button *ngIf="selectedNode" (click)="openTestCaseForm(true)" pButton type="button" label="New Child Test Case" icon="fa-plus"></button>
</div>
<div class="ui-toolbar-group-right">
<button *ngIf="selectedNode" (click)="openTestCaseForm(true, 1)" pButton type="button" icon="fa-pencil-square-o" label="Edit"></button>
<button *ngIf="selectedNode" pButton type="button" icon="fa-trash-o" class="ui-button-danger" label="Remove"></button>
</div>
</p-toolbar>
</p>
</div>
<div style="float: left; width: 35%">
Search <input placeholder="Search" pInputText type="text" style="border: 1px solid silver" /><br /><br />
<p-tree [style]="{'font-size':'18px', 'width': '95%'}" selectionMode="single" [(selection)]="selectedNode" [value]="testCases"></p-tree>
</div>
<div style="float: left; width: 65%; border-left: 1px solid silver; padding-left: 20px; font-size: 18px">
<test-case-editor [testCase]="selectedNode" *ngIf="selectedNode"></test-case-editor>
</div>
<p-dialog width="1800" modal="true" header="Add New Test Case" [(visible)]="addNewTestCaseForm">
<test-case-editor [testCase]="selectedNode" [mode]="mode"></test-case-editor>
</p-dialog>
テスト・ケース・editor.ts（テストケースの形コントローラ）
export class TestCaseEditorComponent implements OnInit {
/**
* Options for FEATURES flags
*/
private featureOptions:any[] = [];
/**
* Selected node
*/
private selectedFeatureNode:any;
/**
* Added features (flags)
*/
private nodes:any[] = [];
/**
* Name of test case
*/
private name:string;
/**
* Test case to display/edit
*/
@Input() public testCase:any;
/**
* Mode (0 - new tc, 1 - edit mode, 2 - display mode)
*/
@Input() public mode:number = 2;
/**
* Constructor
* @param featureFlagsService
* @param testCasesService
* @param communicatesService
*/
constructor(
private testCasesService:TestCasesService,
private communicatesService:CommunicatesService,
private featureFlagsService:FeatureFlagsService) {}
/**
* Actions after init
*/
public ngOnInit() {
}
public ngOnChanges() {
this.init()
}
/**
* Loads flags for particular testCase
* @param testCase
*/
public init() {
this.nodes = []
this.featureFlagsService.getAll().subscribe(
records => {
//Creating a tree
let tree = this.featureFlagsService.asTree(records, { parent: true })
let features = this.testCasesService.getFeatures(tree)
let configuration = this.testCasesService.getConfigurationFeatures(tree)
let featureOptions = [{ label: 'Select feature...', value: null }]
featureOptions = featureOptions.concat(this.testCasesService.getFeaturesOptions(configuration))
this.featureOptions = featureOptions.concat(this.testCasesService.getFeaturesOptions(features))
//Filling form with flags in table when editing
if(this.testCase && (this.mode == 1 || this.mode == 2)) {
this.name = this.testCase.data.name;
}
}
)
}
/**
* Adds flag to feature list
* @param flag
*/
private addNode(node) {
let found = this.nodes.find(element => {
if(element.data.id == node.data.id) {
return true
}
})
if(!found)
this.nodes.push(node)
}
よろしく