Многократный выбор тега с помощью * 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 file

    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

Определить массив для хранения второго вызова 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 2

Попробуйте так:

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>

Демо

Answer 3

Вы используете ту же ссылку для своих данных привязки.

Одним из решений может быть объявление dropData как массива размером с размер вашего массива.

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

Затем используйте соответствующую таблицу для значений. Вам нужно сделать клон каждого с чем-то вроде этого (включенным в стекаблитц). Я выбрал мелкую копию с оператором распространения в этом случае [...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]"

Демо здесь - StackOverflow

Я советую вам использовать что-то вроде выбора материала. Вы заметите, что вам нужно нажать три раза в раскрывающемся списке, чтобы открыть его, если вы удалите данные (this.dropdata [i] ||). Это связано с тем, что очень трудно добавлять параметры, пока выбор открыт. Поэтому первый щелчок открывает его пустым, второй - закрывает его, а третий открывает его с новыми данными.

Это еще одна проблема, которую можно решить, но я не думаю, что она входит в суть вопроса.

Вы будете сталкиваться с этим. Другие, такие как Выбор материала , уже решили эти проблемы.