Question

我创建了一个名为data-menuitemtype的属性，我在div循环的*ngFor内使用了该属性。我之前从未遇到过像这样创建属性的问题，因为它是完全有效的HTML5语法，但由于某种原因*ngFor循环似乎不喜欢它并给我以下错误：

＆＃34;无法绑定到＆＃39; menuitemtype＆＃39;因为它不是＆＃39; div＆＃34;＆＃34;的已知属性。

如果我将其更改为id它＆＃34;工作＆＃34;，但是我会有一堆具有相同值的ID，这显然不是理想的。如何在*ngFor循环中使用创建的属性而不会导致错误？这可能吗？

这是我的HTML：

<div *ngFor="let variety of varieties">
    <div class="varietyTypeName menu-item-type-header" data-menuitemtype="{{variety.VarietyTypeName}}">
        {{variety.VarietyTypeName}}
        <i class="fa fa-angle-down arrow-toggle"></i>
    </div>    
</div>

Answer 1

从我看到的情况来看，data-menuitemtype不是属性，而是属性，因此您应该在代码中使用[attr.insertYourAttributeHere]，如下所示：

<div *ngFor="let variety of varieties">
    <div class="varietyTypeName menu-item-type-header" [attr.data-menuitemtype]="variety.VarietyTypeName">
        {{variety.VarietyTypeName}}
        <i class="fa fa-angle-down arrow-toggle"></i>
    </div>    
</div>

或者如果您更喜欢插值：

<div *ngFor="let variety of varieties">
    <div class="varietyTypeName menu-item-type-header" attr.data-menuitemtype="{{variety.VarietyTypeName}}">
        {{variety.VarietyTypeName}}
        <i class="fa fa-angle-down arrow-toggle"></i>
    </div>    
</div>

有关属性和属性之间差异的更多信息，请查看Angular 2 Template Syntax。

Angular 2 * ngFor error：无法绑定到＆＃39; menuitemtype＆＃39;因为它不是＆＃39; div＆＃39;

1 个答案: