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 - 錯誤：超出最大調用堆棧大小

回答

相關問題