javascript - 使用 *ngfor 的多个选择标签更改第一个选择标签值会影响其他选择标签

Question

      <table id="DataTable" border="1" ALIGN="center">
    	<tr ALIGN="center">
    		<th>name</th>
    		<th>address</th>
    		<th>number</th>
    		<th>type</th>
    	</tr>
    	<tr class="tcat" *ngFor="let item of Tdata;  let i = index;">
    		<td class="name">{{item.name}}</td>
    		<td class="address">{{item.address}}</td>
    		<td class="number">{{item.number}}</td>
    		<td class="type" ALIGN="center"
    			*ngIf="!item.type || item.type == null || item.type == 'undefined'">
    			<select (click)="jsFunction();">
             <option value="" disabled selected>Select your option</option>
            <option *ngFor="let currentData of dropdata"> 
              {{currentData.type}}</option>
          </select>
    		</td>
    	</tr>
    </table>`

.ts 文件

    dropdata:any;
  Tdata = [
    { name: "xyz", address: "abc", number: 12345, type: null },
    { name: "xyz1", address: "abc1", number: 78900, type: null },
    { name: "xyz2", address: "abc2", number: 7400, type: null }
  ];
  selecttedDropData = {};

  jsFunction() {
    // called second api;
    this.dropdata = [
      { number: "12345", type: "customer" },
      { number: "12345", type: "dealer" },
      { number: "12345", type: "client" },
      { number: "12345", type: "master" }
    ];

  }

1. 在页面加载时，我显示了一个表格，并在列类型中添加了一个下拉菜单。

2. 单击每个下拉菜单时，我调用一个 API 并获取要填充的数据选项。

3. 唯一的问题是，当我点击第一个下拉菜单或任何其他下拉菜单并选择任何选项，然后我选择第二个或任何其他下拉菜单时，所有选定的下拉菜单值都会发生变化等等。

找不到任何有用且正确的答案。请帮助我。

非常感谢。

Answer 1

像这样尝试:

selecttedDropData = {};


  jsFunction(num) {
    // called second api;
    let dropData = [
      { number: "12345", type: "customer" },
      { number: "12345", type: "dealer" },
      { number: "12345", type: "client" },
      { number: "12345", type: "master" }
    ];
    this.selecttedDropData[num] = dropData;
  }

模板:

<option [value]="currentData.type" *ngFor="let currentData of selecttedDropData[item.name]"> 
        {{currentData.type}}
</option>

Demo