Angular中选择特定选项时按行显示文本框的实现问题

你当前的问题根源在于用了全局的selectedType变量，所有行的文本框都绑定这个变量，导致只要任意一行选中"random value"，所有行的文本框都会同步显示。要实现每行独立控制，得给每行的数据单独存储选中状态，具体修改如下：

1. 给每行数据添加独立的选中状态属性 #

在获取到产品数据后，遍历给每个product对象添加selectedOption属性，用来存储当前行的下拉选中值：

// 假设你的产品数据数组是products，在初始化或获取数据后执行
this.products.forEach(product => {
  product.selectedOption = ''; // 初始化为空值
});

2. 修改模板代码，绑定每行的选中状态 #

把下拉框的选中值绑定到当前行product的selectedOption，文本框的显示条件也改为判断当前行的这个属性：

<ng-template pTemplate="body" let-product>
    <tr>
        <td>{{ product.ColumnName }}</td>
        <td>{{ product.DataType }}</td>
        <td>{{ product.NullCount }}</td>
        <td>{{ product.percentage }}</td>
        <td>
            <!-- 用双向绑定[(ngModel)]直接绑定当前行的选中状态 -->
            <select name="" id="" class="form-control" [(ngModel)]="product.selectedOption">
                <option value="" *ngFor="let option of getOptions(product.DataType)">{{option}}</option>
            </select>
            <br/>
            <!-- 只判断当前行的selectedOption -->
            <input type="text" *ngIf="product.selectedOption === 'random value'" >
        </td>
    </tr>
</ng-template>

可选：不用双向绑定的写法 #

如果不想使用ngModel，可以通过change事件传递当前行对象来更新状态：

模板修改 #

<select name="" id="" class="form-control" 
        (change)="onChange($event, product)"
        [value]="product.selectedOption">
    <option value="" *ngFor="let option of getOptions(product.DataType)">{{option}}</option>
</select>

组件方法修改 #

onChange(event: any, product: any) {
  product.selectedOption = event.target.value;
}

这样修改后，每个表格行的下拉选中状态都独立存储在自身的product对象中，只有选中"random value"的那一行才会显示对应的文本框，其他行不受影响。

内容的提问来源于stack exchange，提问作者dev254