Angular 2-錯誤：超出最大調用堆棧大小

Question

請看一下這個問題。

假設 ：

我有一個帶有表單的組件，可以添加/編輯測試用例。 組件可以在3種不同的模式下運行（第一個參數）（0-空表格，1-編輯模式，2-顯示模式（無輸入），並將所選測試用例作為第二個參數。第二個參數可以是測試用例對象（如果如果mode為0並定義了測試用例對象，則該對象將是新測試用例的父對象；如果mode為1，則選擇的測試用例將被編輯為測試用例；如果mode為2，則選擇的測試用例將顯示測試用例。測試用例對象未定義，新的測試用例將沒有父對象，因此它將位於樹的頂部）。

表單包含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  
    }

測試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>

test-case-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)
    }

問候

Answer 1

您為什么要用香蕉拳擊非ngModels？

[(visible)]="addNewTestCaseForm" 。

這應該是單向綁定：

[visible]="addNewTestCaseForm" 。

看起來有些語法問題可能正在困擾您。