在 div 元素上使用 On load 调用 Angular2 中的方法并将来自 html 的数据作为参数传递

Question

我有一堆div元素，其背景颜色必须根据angular component.For示例中的数据设置，如果数据为0.5及以下，则应该是绿色的，所以 on.For 数据（s.score）在 HTML template.But 中可用我需要一种方法将此数据作为参数传递给函数，该函数应该在加载此 div.The class 时调用 div 元素的名称是 "card" 这是我的 div 结构：

<div *ngFor="let s of res1  let i=index" style="display:inline-block;padding:10px;" [dragula]='"bag-task1"'>
         <div class="container">
             <div  class="card" id="{{'card_'+i}}" #cardDiv (click)="flip(cardDiv.id,$event)" >
                 <div class="front">
       <div style="border:1px solid white;text:white">
         <h3>{{s.Unit}}</h3>
       </div>

           <div style="display:inline-block">
          <div style="display:inline-block"> <img src="./assets/O2.png" style="width:40px;height:40px;float:left;border:0px"/>
            <h3 style="margin-left:40px;width:30px">{{s.sao2}}</h3></div>
              <div style="display:inline-block">
                <img src="./assets/bp_icon.png" style="width:40px;height:40px;float:left;border:0px"/>
                <h3 style="float:right;margin-left:20px;width:30px">{{s.systemicmean}}</h3></div>
          </div>

       </div>
    </div>

非常感谢任何帮助。提前致谢。苏普拉亚

Answer 1

你为什么不在你的组件中创建一个 public 函数，returns 一个字符串 class 名称（或者如果你想弄脏，一个十六进制颜色您可以在 background-color 样式属性中使用的代码？

https://stackblitz.com/edit/angular-qflqpp?file=app%2Fapp.component.ts

getBackgroundClass(s: Element): string {
  if (s.score < 0.5) {
    return 'green';
  }
  return 'red';
}

在 div 元素上使用 On load 调用 Angular2 中的方法并将来自 html 的数据作为参数传递

Invoke a method in Angular2 using On load on div element and pass data from html as a parameter

html

onload

angular