如何使用Angular的ngFor索引index插值生成动态id与for属性值

问题原因 #

你现有代码的错误有两点：

• 直接在普通HTML属性值中写表达式不会被Angular解析，只会被当作普通字符串处理
• label的for属性值和对应input的id值不匹配（你input生成的是p1到p15，但label的for生成的是p0到p14，无法正常关联触发checkbox选择）

修正方案 #

Angular动态属性赋值有两种常用写法，二选一即可：

方案1：使用方括号属性绑定语法

通过方括号包裹属性名，告诉Angular属性值是需要解析的表达式：

<input checked class="p-input" [id]="'p' + (i + 1)" type="checkbox" (change)="onChange($event)">
<label class="p-label" [for]="'p' + (i + 1)">{{"termsAgreement.paragraph_" + (i+1) + ".title" | translate}}</label>

方案2：使用插值表达式嵌入属性值

直接在属性值中用{{}}包裹动态部分，写法更简洁：

<input checked class="p-input" id="p{{i + 1}}" type="checkbox" (change)="onChange($event)">
<label class="p-label" for="p{{i + 1}}">{{"termsAgreement.paragraph_" + (i+1) + ".title" | translate}}</label>

完整修正后代码 #

<div class="terms-wrapper">
    <ul class="terms">
        <li class="terms-item" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; let i=index">
            <input checked class="p-input" id="p{{i + 1}}" type="checkbox" (change)="onChange($event)">
            <label class="p-label" for="p{{i + 1}}">{{"termsAgreement.paragraph_" + (i+1) + ".title" | translate}}</label>
            <h2 class="p-title">{{"termsAgreement.paragraph_" + (i+1) + ".title" | translate}}</h2>
            <p class="p-text">{{"termsAgreement.paragraph_" + (i+1) + ".text" | translate}}</p>
        </li>
    </ul>
</div>

内容的提问来源于stack exchange，提问作者Pagan