以角度填充数据下拉onclick表格行（基于表格行数据）

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 调用之后，单击的下拉列表应该填充我得到的响应数据，以便我可以一次性选择该数据。 我已经说明了我的情况。如果你不明白这个问题，请问我。在谷歌上搜索，但找不到与此相关的任何内容。一定有什么我错过了，或者我不知道 非常感谢。

Answer 1

试试这样：

模板：

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

<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