Question

我有一个表格视图，在表格视图的每一行都有下拉菜单。

我想知道是否有一种方法可以捕获正在更改/选择的下拉项（表行1或表行2等）。

.TS

constructor() {
   this.cars.push({label:'Honda', value:0},
                  {label:'Toyota', value:1},
                  {label:'Mazda', value:2},
                  {label:'Not Selected', value:3})
}

onSelectedItem(selectedCar) {
// could able to capture the value of the selected item from the dropdown, 
// but do not know which tablecell is...
    console.log(selectedCar);
}

.HTML

<table *ngIf="tableRows.length > 0">
    <thead>
        <tr>
            <th>Cars</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let car of tableRows">
                <p-dropdown [options]="cars"  [optionLabel]="label" placeholder="Select Car" 
                (onChange)="onSelectedItem($event.value)"></p-dropdown>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

如果只需要该行的索引，则可以通过以下方式进行操作：

<tbody>
        <tr *ngFor="let car of tableRows; let i=index">
                <p-dropdown [options]="cars"  [optionLabel]="label" placeholder="Select Car" 
                (onChange)="onSelectedItem($event.value, i)">
</p-dropdown>
            </td>
        </tr>
 </tbody>

或者您实际上可以传递选定的对象，而不仅仅是传递下拉选择操作中的值。

选择下拉项时捕获表行

1 个答案: