Как связать данные в ngStyle с помощью Angular

Я пытаюсь связать данные с помощью Angular 8, но терплю неудачу. Один из методов, которые я пробовал, выглядит следующим образом:

<div class="speed" style="background-image: url('http://example.com/assets/images/meter.png')" [ngStyle]="{'--p':result.percentage}"></div>

и вывод:

<div _ngcontent-kyh-c1="" class="speed" style="background-image: url('http://example.com/assets/images/meter.png');" ng-reflect-ng-style="[object Object]"></div>

Я хочу, чтобы результат был:

<div _ngcontent-kyh-c1="" class="speed" style="background-image: url('http://example.com/assets/images/meter.png');--p:24;"></div>

FYI, {{result.percentage}} дает и выход 24.

Пожалуйста, игнорируйте _ngcontent-kyh-c1="", который генерируется Angular 8.


angular angular8 angular2-ngcontent ng-style
person Elaine Byene    schedule 26.11.2019    source источник
comment
синтаксис правильный, но он не будет отображать --p:24, потому что --p не является допустимым свойством css   -  person C_Ogoo    schedule 27.11.2019
comment
Что можно сделать, чтобы получить желаемый результат?   -  person Elaine Byene    schedule 27.11.2019
comment
Что ты пытаешься сделать? это должно быть в стиле? так как стиль только для встроенного css   -  person C_Ogoo    schedule 27.11.2019
comment
[ngStyle]="{'transform': 'rotate(' +result.percentage+ 'deg);'}" Я тоже пытался с этим, но тоже не работает. Я пытаюсь связать данные с этим: jsfiddle.net/7j8zrfhn/1   -  person Elaine Byene    schedule 27.11.2019

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте это в свой компонент ts. Это добавит стиль вашему компоненту

import { DomSanitizer } from '@angular/platform-browser';
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.html',
    styleUrls: ['./my-component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent  {

    @HostBinding('attr.style')
    public get valueAsStyle(): any {
       return this.sanitizer.bypassSecurityTrustStyle(`--p: ${this.result.percentage}`);
    }

    constructor(private sanitizer: DomSanitizer) {}
}

Теперь в html у вас будет ..... Итак, hostBinding - отличный способ изменить ваши компоненты хоста.

Теперь я могу использовать переменную во вложенном html, просто используя цвет: var(--p) изменит мой текст на красный. Это то, что я предполагаю, что вы хотите достичь

person Vova Bilyachat    schedule 26.11.2019
comment
Я новичок в Ангуляре. Я предполагаю, что это будет для файла .ts? Что я должен поместить в файл .html для вызова этой функции? Куда мне поместить 1@HostBinding1, а DomSanitizer не разрешен. Мне жаль. Я просто новичок в Angular. - person Elaine Byene; 27.11.2019
comment
@ElaineByene Обновил мой ответ, да, вы правы, вы поместили его в ts, и внутри вашего шаблона ничего не нужно делать. - person Vova Bilyachat; 27.11.2019
comment
Ошибка HostBinding не определена в моей консоли. Кроме того, что мне добавить в HTML для вызова этой функции? Большое спасибо. - person Elaine Byene; 27.11.2019
comment
@ElaineByene Обновлено. вам нужно импортировать его (если вы используете vscode, он должен показать вам желтую лампочку :)). Вам ничего не нужно в html, HostBinding - это атрибут angular, поэтому angular позаботится :) - person Vova Bilyachat; 27.11.2019
comment
Спасибо. Я имею в виду, что я ввожу в свой HTML, чтобы ваш угловой код мог определить, куда он идет: <div class="speed" style="background-image: url('http://example.com/assets/images/meter.png'); --p:24;"></div> - person Elaine Byene; 27.11.2019
comment
В этом случае попробуйте удалить привязку хоста из valueAsStyle и в вашем html [attr.style]=valueAsStyle - person Vova Bilyachat; 27.11.2019
comment
@ElaineByene Но опять же, я предпочитаю использовать привязки к хосту, с точки зрения переменных css не важно помещать точный элемент, важно поместить в корень, для вас, тогда у меня будет компонент, такой как my-progress, и тогда он будет иметь стиль в корне. - person Vova Bilyachat; 27.11.2019