Angular 8: невозможно получить выбранное значение в поле выбора

Question

У меня есть динамический массив c, и я хочу создать поле выбора на основе этого массива, а также выбрать значение, определенное в массиве.

{
  "data": [
    {
      "player settings": [
        {
          "id": 4,
          "labelName": "subtitle font size",
          "labelValue": [
            {
              "id": 1,
              "lbl": "small"
            },
            {
              "id": 2,
              "lbl": "medium"
            },
            {
              "id": 3,
              "lbl": "large"
            }
          ],
          "dataType": "DD",
          "selectedData": "2"
        }
      ]
    }
  ]
}

В HTML файл, у меня есть следующий код:

<table>
 <tr *ngFor="let item of responseRaw | keyvalue; let i = index">
    <!-- <td>&nbsp;</td> -->
    <table>
        <tr *ngFor="let item2 of item.value | keyvalue; let j = index">
            <td> {{item2.key}}
             <table>
                <tr *ngFor="let item3 of item2.value; let j = index">
                    <td class="p-4">
                     {{item3.labelName}}
                    </td>

                    <td *ngIf="item3.dataType == 'DD'">
                      <select name="{{item3.id}}" [(ngModel)]="item3.id">
                        <option *ngFor="let lblSelect of item3.labelValue" [ngValue]="lblSelect.id" [selected]="lblSelect.id == item3.selectedData">
                          {{lblSelect.lbl}}
                        </option>
                      </select>
                    </td>
                </tr>
             </table>
            </td>
        </tr>
    </table>
  </tr>
</table>

Я вижу, что параметры отображаются, но я не вижу, выбран вариант. Здесь selectedData равен 2, поэтому он должен выбрать опцию «средний».

Нужна ваша помощь.

Answer 1

Измените следующее:

• В данных json в качестве числа вместо строки выберите DataData, "selectedData": 2
• Bind selectedData в ngModel вместо id, [(ngModel)]="item3.selectedData"

Пример:

<select name="{{item3.id}}" [(ngModel)]="item3.selectedData">
      <option *ngFor="let lblSelect of item3.labelValue" [ngValue]="lblSelect.id" [selected]="lblSelect.id == item3.selectedData">
            {{lblSelect.lbl}}
      </option>
</select>

Рабочая демонстрация

Answer 2

установить свойство selectedData в ngModel и идентификатор опции в качестве значения в опции, как показано ниже:

<select class='select-option' [(ngModel)]="selectedData 
  (change)='onChangeSelected($event)'>
  <option class='option'  *ngFor='let option of labelValue' 
     [value]="option.id">{{option.lbl}}
  </option>
</select>

добавить метод для обработки изменений:

public onChangeSelected(event) {
  this.selectedData = event.target.value;
}

Answer 3

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

Так что в вашем случае вы можете добавить прослушиватель изменений (я также добавил значение параметра в случае, если NgValue не будет работать:

<select  name="{{item3.id}}" [(ngModel)]="item3.id" (change)="filterData($event.target.value)">
    <option *ngFor="let lblSelect of item3.labelValue" [ngValue]="lblSelect.id" [selected]="lblSelect.id == item3.selectedData" value={{lblSelect.id}}>
        {{lblSelect.lbl}}
    </option>
</select>

Таким образом, когда происходит изменение, вы можете перехватить ваш метод и отфильтровать список, как следует.

Что может быть чем-то как это:

filterData(value){
    //depending on how you want to filter the data out
    this.data.filter(item=>item.whatever == value);
}