Angular 2 - 错误：超出最大调用堆栈大小

假设：

我有形式的组件来添加/编辑一个测试用例。组件可以在3种不同的模式下运行模式（第一个参数）（0-空格式，1-编辑模式，2-显示模式（无输入）以选定的测试用例作为第二个参数第二个参数可以是测试用例对象（如果模式为0并且定义了测试用例对象，则该对象将是新测试用例的父对象，如果模式为1，则所选测试用例将被编辑测试用例，并且当模式为2时，所选测试用例将被显示测试用例。如果测试用例对象未定义，新的测试用例将不会有父对象，因此它将位于树顶部）。

表单包含2个字段：name和feature-flag。下拉并添加到表格中，它有一个树形结构

错误的再现：

当我选择一个测试用例时，打开窗体添加新的或编辑测试用例，添加一些标志，关闭窗体，打开新窗体，重复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) 
    }

问候

来源

2017-05-15 Michal Bialek

你为什么香蕉装箱非ngModels？

[(visible)]="addNewTestCaseForm"。

这应该是一个单向绑定：

[visible]="addNewTestCaseForm"。

看起来像一些语法问题可能会得到你的方式。

来源

2017-05-15 14:42:14 chrispy

Angular 2 - 错误：超出最大调用堆栈大小

回答

相关问题