Angular - ngStyle возвращает [объект Object], когда передается функция, возвращающая строку es6 - PullRequest
Новая
       21

Angular - ngStyle возвращает [объект Object], когда передается функция, возвращающая строку es6

0 голосов
/ 20 марта 2019

Шаблонный компонент такой: 

<ul class="list-group list-group-horizontal">
    <li class="list-group-item no-border" *ngFor="let color of colorList">
        <button class="btn btn-link" (click)="setColor(color.hex)">{{ color.name }}</button>
    </li>
</ul>

{{ selectedColor }}
<div class="colorBlock" [ngStyle]="{'background-color': selectedColor }"></div>

В основном мой компонент должен изменить цвет фона для события (click) кнопки: 

export class BlockColorChangerComponent implements OnInit {
  title = 'Change the color of the block.';
  selectedColor: any = this.setColor();
  colorList = [
    {name: 'Red',  hex: '255,0,0'},
    {name: 'Blue',    hex: '0,0,255'},
    {name: 'Green',  hex: '0,255,0'},
    {name: 'Yellow', hex: '255,255,0'},
    {name: 'Pink',   hex: '255,200,255'},
    {name: 'Random'}
  ];

  randomColor() {
    return Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255);
  }

  setColor(hex?) {
    this.selectedColor = `rgb('${hex === undefined ? this.randomColor() : hex}')`;
  }

  constructor() { }

  ngOnInit() {
    this.setColor();
  }
}

На рендере <div> показывает: 

<div _ngcontent-c1="" class="colorBlock" ng-reflect-ng-style="[object Object]"></div>

Пока {{ selectedColor }} корректно обновляет строку. Я все еще пытаюсь выяснить, на что способен новый тип ES6 ...

Ответы [ 2 ]

1 голос
/ 20 марта 2019

вам нужно немного изменить вашу setColor(hex?) функцию.просто удалите одинарные кавычки.Пример: 

this.selectedColor = `rgb(${hex === undefined ? this.randomColor() : hex})`;
1 голос
/ 20 марта 2019

вы можете попробовать вот так 

  <div class="colorBlock" [style.background]="selectedColor"></div>
...