Угловой лайтбокс: невозможно связать с «лайтбоксом данных», так как он не является известным свойством «а» - PullRequest
Новая
       41

Угловой лайтбокс: невозможно связать с «лайтбоксом данных», так как он не является известным свойством «а»

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

читаю Angular.В нем говорится, что если вы хотите связать свойство, оно должно быть заключено в [].Итак, вот что я сделал, но я получаю ошибку.Любая идея, что я делаю не так?

Мне нужно, чтобы значение data-lightbox было тем, что я устанавливаю / отправляю из другого компонента (родительского компонента)

image-display.component.ts 

@Component({
    selector: 'app-image-display',
    templateUrl: './image-display.component.html',
    styleUrls: ['./image.component.css']
  })
  export class ImageDisplayComponent implements OnInit {
    @ViewChild('inspImage') image: ElementRef
    @Input() inspection: LineSideInspection
    inpsectionId: number;
    santizer: DomSanitizer

    constructor(private imageService: ImageDisplayService, private sanitizer: DomSanitizer) {}

    ngOnInit() {
      this.getMyImage('/getimage/' + this.inspection.id );
        this.inpsectionId = this.inspection.id;
    }
}

image-display.component.html 

<a [href]="sanitize(inspImage.src)" [data-lightbox]="inspectionId" data-title="inspect.inspectionDescription"> 
    <img #inspImage width="110px" height="95px">
</a>

package.json: 

"lightbox2": "^2.10.0",

Ответы [ 2 ]

0 голосов
/ 20 июля 2018

Я нашел способ отображения заголовка в лайтбоксе.Вот что я сделал:

В component.ts я объявил строковую переменную и присвоил значение в методе init, затем в html поместил эту переменную в двойные скобки.

html: 

<a [href]="sanitize(inspImage.src)" [data-lightbox]="inspectionId" data-title="{{inspectionName}}">

TS: 

public inspectionName: string;

ngOnInit(){
    this.inspectionName = this.inspection.inspectionName;
}
0 голосов
/ 18 мая 2018

Попробуйте использовать - 

<a [href]="sanitize(inspImage.src)" [attr.data-lightbox]="inspectionId" data-title="inspect.inspectionDescription"> 
    <img #inspImage width="110px" height="95px">
</a>
...