如何根据 td 元素中的文本值动态更改字体颜色

Question

基本上，在 Palindrome、Authorised 和 Enabled 列下，我需要根据它们的文本值更改它们的颜色。 IE。如果在这些列中说是，则文本应该是绿色和红色，如果它说不。三元运算符用于确定一个值。我接受了面试选择的编码评估，我对 typescript 和 node.js 不太熟悉

people-list.html

<template>
  
  <h2 class="title">${heading}</h2>
  <table class="table is-striped is-fullwidth">
    <thead>
      <tr>
        <th>Name</th>
        <th>Palindrome</th>
        <th>Authorised</th>
        <th>Enabled</th>
        <th>Colours</th>
      </tr>
    </thead>
    <tbody>

      <!--
        TODO: Step 6
        Add styles to Palindrome, Authorised and Enabled values.
        When the value is Yes the text colour should be Green.
        When the value is No the text colour should be Red.
      -->

      <tr repeat.for="person of people" person.bind="person">
        <td><a class="is-link" href="/people/${person.id}">${person.fullName}</a></td>
        <td id="palindrome">${person.palindrome ? 'Yes' : 'No' }</td>
        <td>${person.authorised ? 'Yes' : 'No'}</td>
        <td>${person.enabled ? 'Yes' : 'No'}</td>
        <td>${person.colours | colourNames }</td>
      </tr>
    </tbody>
  </table>

    <script type="text/javascript">

        var palinResult = document.getElementById("palindrome").nodeValue

        console.log(palinResult);

        if (palinResult === "Yes") {

            palinResult.fontcolor("green");

        } else if (palinResult === "No") {

            palinResult.fontcolor("red");

        }

    </script>

</template>

people-list.ts

import { autoinject, bindable } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';
import { Person } from '../models/person';
import { IPerson } from '../interfaces/iperson';



@autoinject
export class PeopleList {

  constructor(private http: HttpClient) { }

  heading = 'People';

  @bindable people: Person[] = [];

  async activate() {
    const response = await this.http.fetch('/people');
    const people = await response.json();

    this.people = people.map((person: IPerson) => new Person(person));
  }
}

people.ts - 模型

import { computedFrom } from 'aurelia-framework';
import { IPerson } from '../interfaces/iperson';
import { IColour } from '../interfaces/icolour';

export class Person implements IPerson {

  constructor(person: IPerson) {
    this.id = person.id;
    this.firstName = person.firstName;
    this.lastName = person.lastName;
    this.authorised = person.authorised;
    this.enabled = person.enabled;
    this.colours = person.colours;
  }

  id: number;
  firstName: string;
  lastName: string;
  authorised: boolean;
  enabled: boolean;
  colours: IColour[];

  @computedFrom('firstName', 'lastName')
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  @computedFrom('fullName')
  get palindrome(): boolean {

      var s = this.fullName;
      var lowerS = s.toLowerCase()
      var newS = lowerS.replace(/ /g, "");

      //console.log(newS.split('').reverse().join('') === newS);

      return newS.split('').reverse().join('') === newS; //returns boolean to use be used in ternary operator in people-list.html file


  }
}

Answer 1

不熟悉 aurelia 框架，因此可能语法错误，但您可以使用内联样式来实现类似的效果。

<td style='color:${person.authorised ? "green": "red}'></td>