Angular 6 - 在 ngFor 内选择

Question

我在 ngFor 中有一个选择下拉菜单。如何检索循环内每个选择的值？

另外，我想更改 <p> 中每个句子的颜色标签取决于每个选择的值。我该怎么做？

每个句子都应该有一个颜色，具体取决于它旁边的下拉列表中选择的值。并且改变需要立即进行。

这里的代码不起作用。

<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]}">