在下拉式单击表行中填充数据（基于表行数据）的角度

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"},
    ]
}

Answer 1

尝试这样：