帶有 jQ​​uery 綁定的 Angular *ngFor

Question

我正在嘗試修改像https://codepen.io/ritz078/pen/LGRWjE/這樣的水平時間線 Demo 帶有一些硬編碼的日期，我正在嘗試將它們替換為一組日期 (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>

從瀏覽器控制台捕獲首先顯示最后一個硬編碼日期 (03/03/2015)，然后顯示生成的帶有標簽的列表項。 {{parsedDate}} 的值正確且正確顯示，但是 data-data=" " 像字符串一樣讀取這個角度並與其余邏輯混淆

如果我嘗試類似的東西

data-date={{parsedDate}}

我收到以下錯誤：

模板解析錯誤：無法綁定到“日期”，因為它不是“a”的已知屬性。 (""let parsedDate of timelineParsedDates; let index = index;"> <a href="#0" [ERROR ->]data-date={{parsedDate}}>{{parsedDate}}

任何人都知道我如何將這些值動態加載到該數據數據屬性中？ 我讀到將 Angular 與 jQuery 混合並不理想，但它是我能找到的最好的水平時間線。 另外，我對 jQuery 還很陌生）真的找不到關於 S/O 的任何相關問題，所以希望能在這里得到一些建議。 提前致謝。

Answer 1

您可以嘗試使用 Angular 屬性綁定，例如：

[attr.data-date]="parsedDate"