【发布时间】：2017-06-25 09:59:31
【问题描述】：
对于冗长的解释深表歉意，因为我不确定如何最好地描述我的问题/问题。 我对 Angular2 和 typescript 还是很陌生（现在只在其中编码了几个月），并且已经很多年没有编码了，所以几乎又是一个等级新手......
我的页面中有一个费用类型的动态列表，我在更改我的组织值时会填充该列表。该列表由一个复选框和一个替换复选框标签的文本字段组成。我在选中复选框时启用了文本字段，但是我的操作方式非常糟糕。我很快就会在下面展示我的代码。
我要找的流程如下：
- 费用类型列表是从我从我的 基于 OrganizationID 的数据库
- 通过两种方式绑定到输入控件，这适用于我的代码和下面的 html
- 文本框一开始是禁用的，所以只显示值。当我单击一个复选框时，我只想启用该复选框的相关文本框
- 再一次，我有这个工作，虽然我确定它的工作方式不正确...
- 启用文本框后，我将能够更新费用类型，然后通过其他功能将其保存
- 有人告诉我，我现在需要在列表中添加第二个文本框，以便每个复选框都有两个文本框。
- 到目前为止，我能够做的是确认我无法弄清楚如何通过复选框来更新第二个文本框，就像我迄今为止实施该过程的方式一样。
我的 html 代码刚刚添加了第二个文本框以尝试使其正常工作，稍后我将格式化
更新 经过更多调查，我通过在复选框输入中添加 [(ngModel)]=""expenseType.checked" 更新了问题的答案，并更新了描述文本框以使用 [disabled]="!"expenseType.checked"
我也做了更多的阅读，然后看看如何隐藏类别文本框，直到检查并发现使用 [hidden] 也不完全完美，因此将类别文本框更改为使用 *ngIf="expenseType.checked"
我还在 onChecked() 方法中删除了对事件对象的引用。将其留在代码中以备后用
<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>
我班上的 onChecked 方法
onChecked($event) {
/* *if ($event.target.checked == true) {
$event.target.nextElementSibling.disabled = false;}
else {
$event.target.nextElementSibling.disabled = true;
}* */ removed
}截至目前，我在页面上的费用类型列表的捕获。 List with two text boxes
这两组代码用于使用费用类型描述和类别填充文本框。我遇到的问题是我无法以与描述框相同的方式启用类别框。我很确定这是因为我的实现在我的 onChecked() 方法中访问文本框。到目前为止，所有尝试都只是同时启用或禁用所有类别文本框。我无法像访问描述文本框一样访问特定类别文本。
我确信在 ngFor 和可能的 ViewChildren 甚至表单和表单组/控件中使用索引的修订可能是正确的方法，但我无法弄清楚。
最终，（在一个伟大的世界中，我希望隐藏类别文本框，直到我选中复选框，当我这样做时，描述字段已启用并且类别字段出现并已启用准备编辑。我会采取我能得到的东西，只是在选择复选框时启用和禁用两个文本框....
感谢所有反馈，我相信我也会收到一些关于解析事件数组以获取兄弟姐妹的反馈。我请求任何和所有的帮助。
【问题讨论】：
-
您可以通过组件变量直接连接复选框值以禁用属性。例如。
-
感谢激光的回复。但是，这会启用列表中的所有文本框，而不仅仅是与选中的复选框“关联”的文本框
-
因此，在使用激光的答案进行更多调查后，我发现使用 ngModel 是有效的，而不是使用随机值或通用的东西，这最终会影响列表中的所有文本框，我将复选框输入中的选中值放入 ngModel 和文本框上的 disabled 属性。 这很完美，我能够摆脱onchecked 方法中的元素引用。感谢激光让我朝着正确的方向前进。
-
我已将我的评论作为答案，您可以根据需要进行改进。