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;
}
  }
}

预期o / p

我将只编辑相应的“年龄”行

当前行为

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

Slackblitz

Answer 1

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

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

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><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

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

1 个答案: