Angular 6 - Выберите внутри ngFor

Question

У меня есть выпадающий список внутри ngFor.Как получить значение каждого выбора внутри цикла?

Кроме того, я хочу изменить цвет каждого предложения внутри тега p в зависимости от значения каждого выбора.Как мне это сделать?

Изображение: https://i.stack.imgur.com/V33Cl.png

Каждое предложение должно иметь цвет в зависимости от значения, выбранного в раскрывающемся списке рядом с ним.И изменение должно быть немедленным.

Код здесь не работает.

<div *ngIf="sentences?.length > 0;else noItems">
  <ul *ngFor="let sentence of sentences;let i = index;" class="collection">
  <li class="collection-item">
     <p>{{sentence.data}} </p>
     <p style="margin-left:20px; font-size:12px!important"> 
        <select  (change)="filterChanged(selected[i])">
        <option *ngFor="let cat of foods" [value]="cat.value">
        {{cat.viewValue}}
        </option>
        </select>
     </p>
  </li>

ts файл:

filterChanged(selectedValue:string ){
    this.printedOption = selectedValue;
    console.log("COLOR",this.printedOption );
    if(this.printedOption=='1'){
        this.color="pink";
    }
    if(this.printedOption=='2'){
        this.color="red";
    }
}

Answer 1

Попробуйте:

<select #select (change)="filterChanged(select.value, sentence.data)">

и для изменения цвета тега P необходимо определить глобальный объект и установить ключ для объекта в функции filterChanged ():

public colorObj = {};

filterChanged(selectedValue:string, key) {
    let colors = {1: 'red', 2: 'green'};
    this.colorObj[key] = colors[selectedValue];
}

и используйте ngStyle в HTML для установки цвета:

<p [ngStyle]="{'color': colorObj[sentence.data]}">

Answer 2

Вы можете использовать [ngClass] с несколькими условиями для применения класса CSS

HTML код:

<div>
    <ul *ngFor="let sentence of sentences;let i = index;" class="collection">
        <li class="collection-item">
            <p [ngClass]="{'red': sentence?.disco == 1 , 'green': sentence?.disco == 2 }">{{sentence.viewValue}} </p>
            <p style="margin-left:20px; font-size:12px!important">
                <select #val (change)="onChange(val.value,i)">
            <option *ngFor="let cat of foods" [value]="cat.value" >
            {{cat.viewValue}}
            </option>
            </select>
         </p>
      </li>
   </ul>
</div>

CSS:

.red{
  background-color: red;
}

.green{
  background-color: green;
}

Код TS:

import { Component } from '@angular/core';

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foods: any[] = [
    { value: '1', viewValue: 'Pizza' },
    { value: '2', viewValue: 'Tacos' }
  ];

  sentences: any[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];

  onChange(selectedValue, index) {
    console.log(selectedValue)
    this.sentences[index].disco = selectedValue;
  }
}

Stackblitz Demo