I need to interpolate id="p (i 1)" and for="p (i 1) when I use ngFor

`

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

{{"termsAgreement.paragraph_" (i 1) ".title" | translate}} {{"termsAgreement.paragraph_" (i 1) ".title" | translate}} {{"termsAgreement.paragraph_" (i 1) ".text" | translate}}

`

CodePudding user response：

Try property binding

[id]="'p'   (i   1)"

[for]="'p'   i"

CodePudding user response：

Either try property binding as mentioned by @navnath, or try the following interpolation

<input checked class="p-input" id="p{{i 1}}" type="checkbox" (change)="onChange($event)">

<label class="p-label" for="p{{i}}">

CodePudding user response：

I think what you want to do is in the following example:

Use [for] property for data binding. Or you can use double brackets like {{'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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>