Question

这是打字稿和HTML问题。让我描述一下情况。有一个输入框和一个按钮。当我在输入框中键入内容时，它会通过在输入框中键入的段落自动显示该字符。当我单击按钮时，功能onClickAllow()有效。该功能基本上检查一个随机值是否为正或负。它还将输入文本推入数组。输出为：具有背景颜色的index_number.input_text。当Math.Random() > .5时，背景色将为红色，否则为绿色。我的代码也可以。但是问题是，当颜色更改时，它也会更改以前的内容。 html code typescript code Output-1 Output-2

如果您看到Output-1用红色背景色显示第一个元素，但是在Output-2中当第二个元素带有绿色背景色时，它也会更改第一个元素的背景色。但是我想要具有单独背景色的单独元素。

Answer 1

据我了解，您只需要ngFor items列表中元素位置的颜色基准，这可以通过获取每个项目的索引并获取索引的颜色基准来解决。

componnet

  public getColor(index :number) : string {
    switch( index) { 
      case 0 : return "#f00"
      case 1 : return "#0f0"
      case 2 : return "#00f"
      default: return "#abc"
    }
  }

模板

<div *ngFor="let item of list;let i=index" [ngStyle]="{backgroundColor:getColor(i)}">
    {{item.name}}
</div>

demo ?

已更新??

管道将是可重用的解决方案

@Pipe({
  name: 'color'
})
export class ColorPipe implements PipeTransform {

  transform(index: number): any {
    switch( index) { 
      case 0 : return "#f00"
      case 1 : return "#0f0"
      case 2 : return "#00f"
      default: return "#abc"
    }
  }

}

模板

<div *ngFor="let item of list;let i=index" [ngStyle]="{backgroundColor: i | color }">
    {{item.name}}
</div>

demo ?

Answer 2

组件：打字稿Templete：html

array = [];
status = '';

onClickButton(){
this.status = Math.random() > 0.5 ? 'negative' : 'positive';
this.array.push({name: 'name', type: this.status});
}

<button (click)="onClickButton()">Button</button>
<div *ngFor="let item of array; let i = index">
    <p [ngStyle]="{backgroundColor: item.type == 'negative' ? 'red' : 'green'}">{{ i+1 }}.{{ item.name }}</p>
</div>

此解决方案正在工作。

使用* ngFor [ngStyle]更改所有backgroundColor

2 个答案: