angular - 如果选中复选框，则启用文本框 Angular 6

Question

试图找到一些关于此的示例，但我似乎找到的都是 AngularJs 示例。

当选中同一行中的复选框时，是否可以启用我的文本框，而不将复选框绑定(bind)到 bool 值，并将该值绑定(bind)到我的“文本框”，或者不需要编写一些 JavaScript？

<ng-container *ngIf="showRowTextBox">
    <td>
        <input type="text" placeholder="Enter text here" disabled onfocusout="onTextBoxFocusOut(row)"/>
    </td>
    <td>
        <input type="checkbox" />
    </td>
</ng-container>

作为引用，以下是整个表格布局:

<table *ngIf="hasData" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th #tableBody *ngFor="let column of columns">
                {{ column }}
            </th>
            <th *ngFor="let buttonColumnName of buttonColumnNames">
            </th>
            <ng-container *ngIf="showRowTextBox">
                <th>{{ textBoxColumnName }}</th>
                <th>{{ checkBoxColumnName }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of model">
            <ng-container *ngFor="let columnDataName of columnDataNames">
                <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
                    <ng-container *ngIf="modelConfig[columnDataName].isDate;">
                        {{ row[columnDataName] | date:'d MMM yyyy' }}
                    </ng-container>
                    <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
                        <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
                    </ng-container>
                    <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
                        {{ row[columnDataName] }}
                    </ng-container>
                </td>
            </ng-container>
            <td *ngFor="let buttonColumnName of buttonColumnNames">
                <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'">{{buttonColumnName}}</button>
            </td>
            <ng-container *ngIf="showRowTextBox">
                <td>
                    <input type="text" placeholder="Enter text here" disabled  onfocusout="onTextBoxFocusOut(row)"/>
                </td>
                <td>
                    <input type="checkbox"/>
                </td>
            </ng-container>
        </tr>
    </tbody>
</table>

Answer 1

您可以借助 template reference variable 将文本输入的 disabled 属性绑定(bind)到复选框状态。 。为了使绑定(bind)正常工作，ngModel 指令还应该应用于该复选框。

<ng-container *ngIf="showRowTextBox">
  <td>
    <input type="text" [disabled]="!chkEnable.checked" ... />
  </td>
  <td>
    <input #chkEnable ngModel type="checkbox" />
  </td>
</ng-container>

参见this stackblitz进行演示。