Question

如何编写一个从下拉列表中获取数据并填充包含该下拉列表的表格行的函数？

HTML：

<table id="DataTable" border="1" ALIGN="center">
    <tr ALIGN="center">
        <th>name</th>
        <th>add</th>
        <th>number</th>
        <th>type</th>
    </tr>
    <tr class="tcat" *ngFor="let item of Tdata">
        <td class="name">{{item.name}}</td>
        <td class="add">{{item.add}}</td>
        <td class="nyumber">{{item.number}}</td>
        <td class="type" ALIGN="center">
            <select *ngIf="dropData" (click)="jsFunction(item.number);">
                <option>--Select--</option>
                <option *ngFor="let currentData of dropData"> 
                    {{currentData.type}}</option>
            </select>
        </td>
    </tr>
</table>

TS：

ngOnInit() {
    // called first api and filled the data
    this.Tdata=[
        { name: "xyz"
         add: "abc"
         number: 12345
         type: null },
        { name: "xyz1"
         add: "abc1"
         number: 78900
         type: null },
    ]
}

jsFunction(num){
    // calling the second API here based of the given parameter and that
    // is num.. for example I have clicked the dropdown on the first row
    // which has number=12345 so in dropdown, dropData will fill the
    // value type and that's not happening in my case

    this.dropData=[
        {number: "12345"
        type: "customer"},
        {number: "12345"
        type: "dealer"},
        {number: "12345"
        type: "client"},
        {number: "12345"
        type: "master"},
    ]
}

在第一次API调用时会发生什么情况，我将填写表格，注意类型为null，在HTML中存在一个下拉列表，因此在单击任何下拉列表之后，将调用第二个API并传递该单击的行号在它中，在第二次API调用之后，单击的下拉列表应填充我得到的响应数据，以便我可以一次选择该数据。我已经解释了我的情况。请问我是否没有问题。在Google上搜索，但找不到与此相关的任何内容。一定有我想念的东西，或者我不知道非常感谢。

Answer 1

尝试这样：

模板：

在(click)中绑定tr>事件：

<tr class="tcat" *ngFor="let item of Tdata" (click)="jsFunction(item.number);">
</tr>

TS：

jsFunction(num){
   this.dropData= this.Tdata.filter(x => x.number == num)
}

Working Demo

在下拉式onclick表格行（基于表格行数据）中填充数据

1 个答案: