Question

为冗长的解释道歉，因为我不确定如何最好地描述我的问题/问题。我对Angular2和打字稿都很陌生（现在只编写了几个月）并且已经编码多年了，所以几乎都是新手了....

我的页面中有一个动态的费用类型列表，我在更改组织价值时会填充这些费用。该列表由一个复选框和一个替换复选框标签的文本字段组成。我在检查复选框时启用了文本字段，但我的工作结构非常糟糕。我很快就会在下面展示我的代码。

我正在寻找的流程如下：

费用类型列表是从我从我获得的数组中填充的基于OrganizationID的数据库
通过双向绑定到输入控件
文本框以禁用方式开头，因此只显示值。当我单击一个复选框时，我只想启用该复选框的相关文本框
同样，我有这个工作，虽然我如何让它工作是不正确我肯定...
启用文本框后，我将能够更新费用类型，然后通过其他功能保存它
我被告知我现在需要在列表中添加第二个文本框，这样我就会有两个与每个复选框关联的文本框。
到目前为止，我能够做到的是确认我无法弄清楚如何通过复选框更新第二个文本框，就像我到目前为止实施流程一样。

我的html代码添加了第二个文本框，试图让它工作，我将稍后格式化

更新经过更多的调查，我通过添加[（ngModel）] =＆＃34;＆＃34; expenseType.checked＆＃34;更新了答案的问题。到复选框输入并更新说明文本框以使用[禁用] =＆＃34;！＆＃34; expenseType.checked＆＃34;

我还做了更多的阅读，然后看看如何隐藏类别文本框，直到检查并发现使用[隐藏]并不完全正确，所以更改了类别文本框以使用* ngIf =＆＃34; expenseType.checked＆＃34;

我还删除了onChecked（）方法中事件对象的引用。将其保留在代码中供以后使用

＆＃13;

<div>
  <label>Default Expense Types:</label>
  <div *ngFor="let expenseType of expenseTypes">
    <div class="checkBox">
      <input for="expenseTypeText"
             type="checkbox"
             class="checkBox"
             [checked]="false"
             (change)="onChecked($event)"
             [(ngModel)]="expenseType.checked"
             >
      <input type="text"
             class="text_style"
             id="expenseTypeText"
             [disabled]="!expenseType.checked"
             [(ngModel)]="expenseType.description"
             >
      <input *ngIf="expenseType.checked"
             type="text"
             class="text_style"
             id="expenseTypeCategory"
             [(ngModel)]="expenseType.category"
             >
    </div>
  </div>
</div>

＆＃13;

我班上的onChecked方法

＆＃13;

onChecked($event) {
 /* *if ($event.target.checked == true) {
    $event.target.nextElementSibling.disabled = false;}
  else {
    $event.target.nextElementSibling.disabled = true;
  }* */ removed
}

＆＃13;

截至目前截取页面上的费用类型列表I. List with two text boxes

这两组代码用于填充带有expenseType描述和类别的文本框。我遇到的问题是我无法以与描述框相同的方式启用类别框。我非常确定这是因为我的实现访问了我的onChecked（）方法中的文本框。到目前为止，所有尝试都只能同时启用或禁用所有类别文本框。我无法访问特定类别文本，就像我为描述文本框所做的那样。

我确信在ngFor和可能的ViewChildren甚至表单和表单组/控件中使用索引的修订可能是正确的方法，但我无法弄明白。

最终，（在一个伟大的世界中，我希望隐藏类别文本框，直到我选中复选框，当我这样做时，说明字段已启用，类别字段出现并已启用，可以进行编辑。我将我只能在选择复选框时启用和禁用两个文本框。

我感谢任何反馈，我相信我也会得到一些关于解析事件数组以获得兄弟姐妹的反馈。我请求任何和所有的帮助。

Answer 1

用于连接输入的正确方式将是以下模式：

<input type="checkbox" [(ngModel)]="isSomethingChecked"> 
<input type="text" [disabled]="isSomethingChecked">

更新复选框值

1 个答案: