Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2017, 15:59
Аспирант
Отправить личное сообщение для shoopik Посмотреть профиль Найти все сообщения от shoopik
 
Регистрация: 02.07.2017
Сообщений: 68

angular 2 carousel background
Привет, хочу сделать слайдер через ngx-bootstrap, чтобы картинки были как бэкграунд, или может есть другой способ сделать чтобы основное меню сайта было "поверх" этого слайдера.

Создаю компонент, там создаю массив из фоток

import { Component, OnInit } from '@angular/core';
import { NgStyle } from '@angular/common';
import { NgFor } from '@angular/common';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {

  constructor() { }

  images = [];
 
  ngOnInit() {
  	this.images = [
  {"id":1, "url":"assets/img/header.jpeg"},
  {"id":2, "url":"assets/img/velo2.jpeg"},
  {"id":3, "url":"assets/img/velo3.jpeg"},
  	]
  }
}


В html пишу следующее, но чет не работает

<carousel >
  <slide *ngFor = "let image of images" >
  	<div [ngStyle]="{'background-image': url(' + image.url + ')}"></div>
  </slide>
</carousel>


и вот ошибки которые я получаю:
ERROR TypeError: _co.url is not a function
at Object.eval [as updateDirectives] (ng:///AppModule/SliderComponent.ngfactory.js:17)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:82907)
at checkAndUpdateView (vendor.bundle.js:82087)
at callViewAction (vendor.bundle.js:82452)
at execEmbeddedViewsAction (vendor.bundle.js:82410)
at checkAndUpdateView (vendor.bundle.js:82088)
at callViewAction (vendor.bundle.js:82452)
at execComponentViewsAction (vendor.bundle.js:82384)
at checkAndUpdateView (vendor.bundle.js:82093)
at callViewAction (vendor.bundle.js:82452)

Последний раз редактировалось shoopik, 17.07.2017 в 16:37.
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2017, 18:39
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 919

Думаю проблема в кавычках. Без песочницы сложно сказать. Может так
<div [ngStyle]="{'background-image': 'url(' + image.url + ')'}"></div>
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2017, 20:45
Аспирант
Отправить личное сообщение для shoopik Посмотреть профиль Найти все сообщения от shoopik
 
Регистрация: 02.07.2017
Сообщений: 68

Сообщение от destus Посмотреть сообщение
Думаю проблема в кавычках. Без песочницы сложно сказать. Может так
<div [ngStyle]="{'background-image': 'url(' + image.url + ')'}"></div>
неа, не хотит
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Арканоид - побитовые операции (замена на условия) Eadweard Events/DOM/Window 8 14.03.2016 16:12
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 21:11
Arcanoid движок SpiriKoN Общие вопросы Javascript 2 24.10.2014 15:44
Кнопка с выпадом текста acquaviva Элементы интерфейса 7 09.07.2013 02:14
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35