Custom html using angular-CodePudding

I want to use this html an loop for angular

<div >
<select  data-live-search="true">
<option data-tokens="ketchup mustard1">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard2">Burger, Shake and a Smile</option>
<option data-tokens="frosting3">Sugar, Spice and all things nice</option>
</select>
</div>

When use

<select  data-live-search="true" name="{{'idCoin' i}}" [(value)]="customer.idCoin" required>
<option *ngFor="let item of idCoinlist" [value]="item.id" data-tokens="{{item.id}}">{{item.name}}</option>
</select>

Show error: Can't bind to 'tokens' since it isn't a known property of 'option'.ng

HOw i can use loop with custom html? Thanks!

CodePudding user response：

Fixed answer:

<select  data-live-search="true" name="{{'idCoin' i}}"
          [(value)]="customer.idCoin" required>
          <ng-container *ngFor="let item of idCoinlist; index as i">
            <option [value]="item.id" [attr.data-tokens]="item.id">{{item.name}}
            </option>
          </ng-container>
        </select>

CodePudding user response：

I am placing the *ngFor loop in ng-container. ng-container does not get rendered, rather the contents of it will be.

You were missing i, I am guessing it should come from loop index, so I added that as index.

customer.idCoin can't be referenced. I am guessing prop customer is on item? Added this as well. But check this part over yourself. You haven't provided what the data structure is like.

{{item.id}} for the tokens, does not need to be enclosed in brackets. However {{item.name}} does need to be. When you want to print something in html literal (the part which user can see) you wrap it in {{}} to bind it. To use it as a value in the html tag - you don't wrap it.

<select  data-live-search="true" name="{{'idCoin' i}}"
          [(value)]="customer.idCoin" required>
          <ng-container *ngFor="let item of idCoinlist; index as i">
            <option [value]="item.id" [attr.data-tokens]="item.id">{{item.name}}
            </option>
          </ng-container>
        </select>