0

I want to change values of numbers dynamically depending upon certain conditions. When the number less than 0, i want to change the number's color : red, and font-weight:bold. {record.excessMh} will be the number

  • HTML
 <template>
    <tr>
        <td style="background-color:white">People</td>
        <template for:each={records} for:item="record" >
                                <td key={record.id} class={customCss}>
                                    <div class="change-color">
                                        {record.excessMh}
                                    </div>
                                </td>
                        </template>
    </tr>
</template>
  • JS
 getDailyProdListDemo() {
        getDailyPrdList({ recordId: this.recordId, startDate: this.startDate, endDate: this.endDate })
            .then((result) => {
                const data = [...result];
                const dailyPrdList = new Array();
                data.forEach((item) => {
                    const obj = Object.assign({}, item);

          const opScEw = obj.OP_Schedule_ExcessWorkers__c;
                    const scFt = obj.CL_ScheduleExcessFT__c;
                    const scPt = obj.CL_ScheduleExcessWorkersPT__c;

                    const excessMh = opScEw + scFt + scPt;
                    obj.excessMh = excessMh;
                    dailyPrdList.push(obj);

                });
                this.records = [...dailyPrdList];
                this.error = undefined;
                this.getDailyCrewSchedulesDemo();
             
                function customCss(){
                    if(this.excessMh < 0){
                        return this.template.querySelector(".change-color").className.add('red-color')
                    } else{
                        return this.template.querySelector(".change-color").className.add('black-color')
                    }
                };
                customCss();
                // console.log('Retrieved', result)


            }).catch((error) => {
                this.error = error;
                this.records = undefined;
                console.log('Errorrrrr', error)
            })
    }


  • css
.red-color{
    color: red;
    font-weight: bold;
}

.black-color{
    color: black;
}

test server dont's work.. Please help.. Thanks for all your answer:)

1 Answer 1

1

In your case you are trying to access this.template.querySelector(".change-color"). This returns list of div as you are iterating on list of records and you will have multiple divs with change-color class.

Better way is to set css class as a property on record based on required conditions.

Here I am adding example where number which is less than or equal to zero will be red and bold.

app.html

 <template>
        <template for:each={records} for:item="record" >
                            <div key={record.id} class={record.cssClass}>
                                {record.cssClass}
                                    {record.excessMh}
                            </div>
                </template>
</template>

app.js

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  records = [{'excessMh': 1}, {'excessMh': 0}, {'excessMh': 2}];
  connectedCallback() {
    this.records = this.records.map(obj => ({ ...obj, cssClass: obj.excessMh < 1? 'red-color' : 'black-color' }));
  }
}

app.css

.red-color{
    color: red;
    font-weight: bold;
}

.black-color{
    color: black;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .