angular - 如何插入表达式使用 ngFor 索引？

Question

当我使用 ngFor 时，我需要插入 id="p + (i + 1)" 和 for="p + (i + 1)

`

<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">{{"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>

{{"termsAgreement.paragraph_" + (i+1) + ".title" | 翻译}} {{"termsAgreement.paragraph_" + (i+1) + ".title" | 翻译}} {{"termsAgreement.paragraph_" + (i+1) + ".text" | 翻译}}

`

标签： angular

Answer 1

我认为您想要做的是在以下示例中：

使用 [for] 属性进行数据绑定。或者你可以使用像 {{'p'+ (i+1)}} 这样的双括号

<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">{{"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>