Angular *ngFor 与 jQuery 绑定答案

【问题标题】：Angular *ngFor with jQuery BindingAngular *ngFor 与 jQuery 绑定
【发布时间】：2020-10-02 19:46:45
【问题描述】：

我正在尝试修改像 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)，其次显示带有 a-tag 的生成列表项。 {{parsedDate}} 的值已正确显示，但 data-data=" " 像字符串一样读取此角度并与其余逻辑混淆

如果我尝试类似的东西

data-date={{parsedDate}}

我得到以下错误：

模板解析错误：无法绑定到“日期”，因为它不是“a”的已知属性。 (""let parsedDate of timelineParsedDates; let index = index;"> ]data-date={{parsedDate}}>{{parsedDate}}

有人知道如何将这些值动态加载到该数据数据属性中吗？我读到混合 Angular 和 jQuery 并不理想，但它是我能找到的最好的水平时间线。我对 jQuery 也很陌生）真的找不到关于 S/O 的任何相关问题，所以希望在这里得到一些建议。提前致谢。

【问题讨论】：

如果您绝对必须使用 jQuery，请在渲染页面后使用。只需确保您的组件实现AfterViewInit。然后在 ngAfterViewInit() {...} 中添加任意 jQuery 代码
@AlekseySolovey 很棒的提示，谢谢！到目前为止一直在 OnInit() 中执行此操作，但稍后会遇到问题。感谢您在事情发生之前帮助我））

标签： jquery angular typescript data-binding

【解决方案1】：

您可以尝试使用 Angular 属性绑定，例如：

[attr.data-date]="parsedDate"

【讨论】：