角度2：模态切换

Question

为什么当我点击一行的编辑按钮时，模态会无法预测地打开？喜欢 - 几行可以打开，其余的不会。或者当我尝试点击那些未打开的行时，它们已经令人惊讶地打开了。完全无法预测。

以下是我的代码：

  

部分清单：

showDialogBox : boolean = false;

onToggleDialogBox(id) {
    this.showDialogBox = !this.showDialogBox;
    console.log(id);
}

<table class="ui very basic table">
    <thead>
        <tr>
            <th width="35%">Name</th>
            <th>Remarks</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let section of dataSource['docs']">
            <td><h4>{{section.name}}</h4></td>
            <td>{{section.remark}}</td>
            <td class="collapsing">
                <div class="ui small basic icon buttons">
                    <button class="ui button"><i class="write icon" (click)="onToggleDialogBox(section._id)"></i></button>
                    <button class="ui button"><i class="trash icon"></i></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<app-dialog-form *ngIf="showDialogBox" [(showDialogBox)]="showDialogBox" #form>
    {{formTitle}}
    <div class="action" action>
        <button class="ui button basic" (click)="onToggleDialogBox()">Cancel</button>
        <button class="ui button primary medium" (click)="addSection(form.formValues)">Save</button>
    </div>
</app-dialog-form>

  

对话形式：

     

（我认为不需要HTML，因为我只想知道为什么在单击上面的编辑图标/按钮时模式的显示是不可预测的）

@Input() showDialogBox : boolean = true;
@Output() showDialogBoxChange = new EventEmitter<boolean>();