У меня есть простой компонент LWC, в котором я хочу, чтобы пользователи определяли CSS с помощью атрибутов конструктора. Однако, похоже, он не выбирает его, когда я загружаю его на страницу, хотя журналы консоли подбирают правильное значение. Пожалуйста помоги.

Вот мой код: HTML:

<template>
    <div style={divStyle}>
        <span style={fontStyle}>{textToDisplay}</span>
    </div>
</template>

JS файл:

import { LightningElement, api } from 'lwc';

export default class GenericCard extends LightningElement {
    @api textToDisplay;
    @api textColor;
    @api backgroundColor;
    
    get divStyle() {
        console.log('User entered background color: ' + this.backgroundColor);
        return 'background:${this.backgroundColor};color:${this.textColor};text-align:center;padding:6px;';
    }

    get fontStyle() {
        return 'color:${this.textColor}';
    }
}

Я вижу выравнивание текста и отступы, но не цвет фона для div или цвет шрифта.

0
user569925 30 Сен 2020 в 01:30

2 ответа

Лучший ответ

Похоже, вы пытаетесь использовать интерполяцию строк JavaScript, но с другой цитатой. Попробуйте использовать обратную галочку (`) вместо одинарной кавычки (').

Я попробовал следующее в консоли

function SampleClass() {
    this.name = 'Ant'
}
SampleClass.prototype.getNameString = function() {
   return `My name is ${this.name}`;
} 

var inst = new SampleClass();
inst.getNameString();

Screenshot with result of running the code

Вы можете обратиться к https://dmitripavlutin.com/string-interpolation-in-javascript/< /a> или любую другую статью для более подробной информации

3
Learner 30 Сен 2020 в 03:50

Ваши проблемы связаны с конкатенацией строк стиля.

Попробуйте это - у меня это сработало на детской площадке:

get divStyle() {
    console.log('User entered background color: ' + this.backgroundColor);
    return 'background:' + this.backgroundColor
    +';color:' + this.textColor + ';text-align:center;padding:6px;';
}

get fontStyle() {
    return 'color:' + this.textColor + ';';
}
1
Mitch Spano 30 Сен 2020 в 02:17