使用 angular 自定义 html

Question

我想用这个 html 循环 angular

<div >
<select class="selectpicker" 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>

使用时

<select class="/*form-control*/ selectpicker" 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>

显示错误：无法绑定到 'tokens'，因为它不是 'option'.ng

的已知属性

如何将循环与自定义 html 一起使用？谢谢！

Answer 1

我将 *ngFor 循环放在 ng-container 中。 ng-container 不会呈现，而是它的内容。

你遗漏了 i，我猜它应该来自循环索引，所以我将其添加为索引。

customer.idCoin 无法引用。我猜道具 customer 在 item 上？也添加了这个。但是你自己检查一下这部分。你还没有提供数据结构是什么样的。

{{item.id}}为token，不需要用括号括起来。但是 {{item.name}} 确实需要。当你想在 html 文字（用户可以看到的部分）中打印某些内容时，你可以将它包装在 {{}} 中以进行绑定。要将其用作 html 标记中的值 - 您无需将其包装。

<select class="/*form-control*/ selectpicker" 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>

Answer 2

固定答案：

<select class="/*form-control*/ selectpicker" 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>

使用 angular 自定义 html

Custom html using angular

angular-material

bootstrap-4

angular