如何在Angular 4中将数组值作为颜色传递

我是新来的角度和堆栈溢出。我需要知道是否可以将数组的值传递给角4中的元素

基本上，如果学生是或不是绝地武士，我想改变绝地标志的颜色

这是模板：

<div *ngIf="student">
  Student: <a href="#" (click)="clicked()">{{student?.name}}</a>
  <br/>
  <div *ngIf="student?.isJedi">
  Jedi Temple: {{student?.temple}} <br/>
  </div>
  <div #jediSign class="jediSign"></div>
  <button (click)="jediSign.style.background='lightgreen'">Is Jedi?
  </button>
 </div>

如何将颜色从“浅绿色”更改为学生颜色

我将这段代码放在github上，用于pull请求

---

谢谢大家!

只需使用ngStyle设置颜色：

<div ... [ngStyle]="{'background-color': student.isJedi ?
 student.color : 'lightgrey'}"..>

及

。。。

只应使用

样式。背景

输入：

<div *ngIf="student">
  Student: <a href="#" (click)="clicked()">{{student?.name}}</a>
  <br/>
  <div *ngIf="student?.isJedi">
  Jedi Temple: {{student?.temple}} <br/>
  </div>
  <div #jediSign class="jediSign" [style.background]="isJediBackgroundColor(student)" ></div>
  <button (click)="student.isJedi = !student.isJedi">Is Jedi?
  </button>
 </div>

顺便问一下，

点击

是否应该切换isJedi？：

(click)="student.isJedi = !student.isJedi"

---

你试过ngStyle吗？它很管用。我尝试过类似的方法，但使用[style.backgroundColor]=“student.color”。这改变了DIV的颜色，但我需要这个改变应该通过点击来实现。太好了！这解决了我的问题。但是第一个结果

已经显示了

student.color

的背景色。如何显示默认颜色并通过单击更改为

student.color

？谢谢

<div *ngIf="student">
  Student: <a href="#" (click)="clicked()">{{student?.name}}</a>
  <br/>
  <div *ngIf="student?.isJedi">
  Jedi Temple: {{student?.temple}} <br/>
  </div>
  <div #jediSign class="jediSign" [style.background]="isJediBackgroundColor(student)" ></div>
  <button (click)="student.isJedi = !student.isJedi">Is Jedi?
  </button>
 </div>

isJediBackgroundColor(student) {
  return student.isJedi ? student.color : '';
}

(click)="student.isJedi = !student.isJedi"