使用 *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

您对绑定数据使用相同的引用。

一种解决方案可能是将 dropData 声明为一个大小与您的数组大小相同的数组。

this.dropData = new Array(this.Tdata.length);

然后使用相应的表格获取值。您需要使用类似这样的内容（包含在 stackblitz 中）对每个进行克隆。在这种情况下，我选择了带有扩展运算符的浅拷贝[...this.data]

 jsFunction(event, i) {
    if (this.dropdata[i] == null || this.dropdata[i].length < 1) {
      this.dropdata[i] = [...this.data];
    }
  } 

然后在html中

*ngFor="let currentData of this.dropData[index]"

Demo Here - StackOverflow

我给你的建议是你使用像材料选择这样的东西。您会注意到，如果您删除 (this.dropdata[i] || 数据)，则需要在下拉列表上单击三次才能打开。这是因为在选择打开时添加选项非常困难。因此，第一次单击将其打开为空，第二次单击将其关闭，第三次单击将其与新数据一起打开。

这是另一个可以解决的问题，但我认为它不在问题的范围内。

你会不断碰到这些。 material select 等其他人已经解决了这些问题。

Answer 2

定义一个数组来存储第二个 api 调用 selectedData=[];。其实我做了一个小技巧。由于我们无法区分<select> 和<option>，因此点击时标记。我使用变量open 来了解选择下拉菜单是否打开。

<select (blur)="closeSelect()" (click)="jsFunction(i);">
    <option value="" disabled selected>Select your option</option>
    <option [value]="currentData.type" *ngFor="let currentData of selectedData[i]">{{currentData.type}}</option>
</select>

如果它打开并被点击，我们可以将它添加到具有相应索引的数组中。

jsFunction(i){
    // telling open = false / true
    this.open=!this.open;
    // called second api;
    let data=[
        {number: "1",
        type: "customer"},
        {number: "2",
        type: "dealer"},
        {number: "3",
        type: "client"},
        {number: "4",
        type: "master"},
    ]
    if(this.open)
        this.selectedData[i]=data;
}

当您点击值或(blur) 外部时，我们会生成open = false。

closeSelect(){
  this.open=false
}

由于没有其他答案有效，这可以解决您的问题。我也搜索过，但没有运气。我会努力优化的。

工作Stackblitz

Answer 3

试试这样：

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