基于下拉值的 Angular 8 ngIf 表达式

Question

我有一个使用 Angular 配置的自定义表格生成器，表格具有下拉值和文本字段值。根据下拉值，我需要使相应的表格单元格应该是可编辑的。

app.component.html

<table border="1">
<tr><td>Name</td><td>Age</td><td>New Age</td></tr>
<tr><td>John</td><td><select (change)="editAge(selectField1.value)" #selectField1>
<option value="1">Less than 10</option>
<option value="2">Greater than 10 and Less than 80</option>
<option value="3">Less than 80</option>
</select></td><td> <span  *ngIf="!expression">24</span> <span *ngIf="expression"><input type="text" /></span></td></tr>
<tr><td>Jacky</td><td><select (change)="editAge(selectField2.value)" #selectField2>
<option value="1">Less than 10</option>
<option value="2">Greater than 10 and Less than 80</option>
<option value="3">Less than 80</option>
</select></td><td> <span  *ngIf="!expression">4</span> <span *ngIf="expression"><input type="text" /></span></td></tr>
<tr><td>Roy</td><td><select (change)="editAge(selectField3.value)" #selectField3>
<option value="1">Less than 10</option>
<option value="2">Greater than 10 and Less than 80</option>
<option value="3">Less than 80</option>
</select></td><td> <span  *ngIf="!expression">34</span> <span *ngIf="expression"><input type="text" /></span></td></tr>
</table>

app.component.ts

export class AppComponent {
title = 'my-app';
expression = false;
nameBind: string;
editAge(ee) {
if (ee === '2') {
this.expression = true;
} else { this.expression = false;
}
}
}

预期盈亏

我不想只编辑相应的行年龄

当前行为

所有"年龄"字段都是可编辑的

松弛闪电战

Answer 1

我将按如下方式处理这种情况：

我将删除<span>标签并使用 value 属性来设置文本框本身的值，并使用 change 方法来检测更改的值：

网页代码：

<table border="1">
<tr>
<td>Name</td>
<td>Age</td>
<td>New Age</td>
</tr>
<tr>
<td>John</td>
<td><select (change)="editAge(selectField1.value)" #selectField1>
<option value="1">Less than 10</option>
<option value="2">Greater than 10 and Less than 80</option>
<option value="3">Less than 80</option>
</select></td>
<td><input value="24" [disabled]="selectField1.value == 2" type="text" /></td>
</tr>
<tr>
<td>Jacky</td>
<td><select (change)="editAge(selectField2.value)" #selectField2>
<option value="1">Less than 10</option>
<option value="2">Greater than 10 and Less than 80</option>
<option value="3">Less than 80</option>
</select></td>
<td> <input value="4" [disabled]="selectField2.value == 2" type="text" /></td>
</tr>
<tr>
<td>Roy</td>
<td><select (change)="editAge(selectField3.value)" #selectField3>
<option value="1">Less than 10</option>
<option value="2">Greater than 10 and Less than 80</option>
<option value="3">Less than 80</option>
</select></td>
<td><input value="34" [disabled]="selectField3.value == 2" type="text" /></td>
</tr>
</table>

TS 代码：

editAge() {
// do nothing
}

Working_Demo