Блог

Главная - Вопросы по программированию - Angular * ngFor с привязкой к jQuery

Angular * ngFor с привязкой к jQuery

#jquery #angular #typescript #data-binding

#jquery #angular #typescript #привязка к данным

Вопрос:

Я пытаюсь изменить горизонтальную временную шкалу, например https://codepen.io/ritz078/pen/LGRWjE / Демо-версия поставляется с некоторыми жестко заданными датами, и я пытаюсь заменить их массивом дат (timelineParsedDates)

 <ol>
    <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
    <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
    <li><a href="#0" data-date="20/04/2014">20 Apr</a></li>
    <li><a href="#0" data-date="20/05/2014">20 May</a></li>
    <li><a href="#0" data-date="09/07/2014">09 Jul</a></li>
    <li><a href="#0" data-date="30/08/2014">30 Aug</a></li>
    <li><a href="#0" data-date="15/09/2014">15 Sep</a></li>
    <li><a href="#0" data-date="01/11/2014">01 Nov</a></li>
    <li><a href="#0" data-date="10/12/2014">10 Dec</a></li>
    <li><a href="#0" data-date="19/01/2015">19 Jan</a></li>
    <li><a href="#0" data-date="03/03/2015">3 Mar</a></li>
    <li *ngFor="let parsedDate of timelineParsedDates; let index = index;">
        <a  href="#0" data-date="parsedDate">{{parsedDate}}</a>
    </li>
<ol>

Запись из browserconsole сначала показывает последнюю жестко заданную дату (03/03/2015), а затем сгенерированный список с тегом. Значение для {{parsedDate}} отображается правильно и корректно, но data-data=» » считывает этот angular как строку и путает с остальной логикой
введите описание изображения здесь

Если я попробую что-то вроде

 data-date={{parsedDate}}

Я получаю следующую ошибку:

Ошибки синтаксического анализа шаблона: не удается выполнить привязку к ‘date’, поскольку это неизвестное свойство ‘a’. («»пусть проанализирована дата timelineParsedDates; пусть index = index;»> <a href=»#0″ [ОШИБКА ->]дата данных={{Проанализированная дата}}>{{Проанализированная дата}}

У кого-нибудь есть идея, как я мог бы динамически загружать эти значения в это свойство data-data? Я читал, что смешивание Angular с jQuery не идеально, но это была самая хорошая горизонтальная временная шкала, которую я смог найти. Также я довольно новичок в jQuery) Не могу найти какие-либо связанные вопросы по S / O, поэтому надеюсь получить здесь несколько советов. Заранее спасибо.

Комментарии:

1. если вам абсолютно необходимо использовать jQuery, сделайте это после рендеринга страницы. Просто убедитесь, что ваш компонент реализует AfterViewInit . Затем добавьте любой код jQuery внутрь ngAfterViewInit() {...}

2. @AlekseySolovey Отличный совет, спасибо! До сих пор я делал это в OnInit(), но позже должен был столкнуться с проблемами. Спасибо, что помогли мне, прежде чем это произошло))

Ответ №1:

Вы можете попробовать использовать привязку атрибута Angular, например:

 [attr.data-date]="parsedDate"