Связывание стилей и ngStyle, похоже, не работают для установки фонового изображения внутри DIV в Angular5. - PullRequest
Новая
       6

Связывание стилей и ngStyle, похоже, не работают для установки фонового изображения внутри DIV в Angular5.

0 голосов
/ 13 мая 2018

Я использовал карты материала Angular, но каким-то образом не смог изменить интервал, так как хотел, несмотря на попытки многих стилей CSS, поэтому я подумал о создании собственных карт.При этом я должен установить изображение в качестве фона внутри div.

Я пробовал много способов, 

<div *ngIf="imgSrc" [style.background-image]="imgSrc" [style.background-size]="cover"></div>

этот стиль не показывает ошибку, но я некажется, что я вижу любое изображение внутри моего div

и даже используя ngStyle, я получаю ошибку при попытке, 

<div *ngIf="imgSrc" [ngStyle]="{
    'background-image': 'url(\'https://material.angular.io/assets/img/examples/shiba1.jpg\')'
  }"></div>

Error: Template parse errors:
Parser Error: Unexpected token Lexer Error: Unterminated quote at column 43 in expression [{
    'background-image': 'url(\'https:] at column 44 in [{
    'background-image': 'url(\'https://material.angular.io/assets/img/examples/shiba1.jpg\')'
  }] in ng:///AppModule/HomeCardComponent.html@37:26

Хотя я не хочу устанавливать с помощью url, но использую imgSrc, который являетсяURL, который я передаю от компонента.

И как мне установить imgSrc с помощью ngStyle, потому что он также выдает ошибку при использовании интерполяции?

image has to come on the right half of the card

Мой HTML-код выглядит следующим образом: 

<div class="card shadow">
  <div class="row">
    <div class="col-md-7 card-body">
      <div class="card-domain">{{ domain }}</div>
      <div class="card-title">{{ title }}</div>
      <div class="card-date">{{ date }}</div>
      <div class="card-content">{{ content }}</div>
    </div>
    <div class="col-md-5">
      <div *ngIf="imgSrc" [style.background-image]="imgSrc" [style.background-size]="cover"></div>
    </div>
  </div>      
</div>

home-card.component.ts 

import { Component, OnInit, Input } from '@angular/core';

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

  @Input() domain: string;
  @Input() title: string;
  @Input() date: string;
  @Input() content: string;
  @Input() imgSrc: string;

  constructor() { }

  ngOnInit() {
  }
}

home-card.component.css 

.card{
height: auto;
max-width: 100%;
margin: 0px;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

home.component.ts 

<div class="row">
    <div class="col-md-6">
        <div class="page-header">
            <h3>Latest Post</h3>
        </div>
        <app-home-card domain="XYZ" title="It should work!" date="Nov 12" content="Let's just assume it's working." imgSrc="https://material.angular.io/assets/img/examples/shiba2.jpg"></app-home-card>
    </div>
    <div class="col-md-6">
        <div class="page-header">
            <h3>Most Popular Post</h3>
        </div>
        <app-home-card domain="ABC" title="Why is it not working?" date="Nov 11" content="Or make it work somehow." imgSrc="https://material.angular.io/assets/img/examples/shiba2.jpg"></app-home-card>
    </div>
</div>

1 Ответ

0 голосов
/ 13 мая 2018

1. проверьте ваши URL-адреса
2. вы должны сделать это следующим образом: 'url(' + imgSrc + ')'

<div class="card shadow">
  <div class="row">
    <div class="col-md-7 card-body">
      <div class="card-domain">{{ domain }}</div>
      <div class="card-title">{{ title }}</div>
      <div class="card-date">{{ date }}</div>
      <div class="card-content">{{ content }}</div>
    </div>
    <div class="col-md-5">
      <div *ngIf="imgSrc" [style.background-image]="'url(' + imgSrc + ')'" [style.background-size]="cover"></div>
    </div>
  </div>      
</div>
...