如何使用ngFor显示数据而不为输入值创建单独的div

Question

对于发票表格，如何显示每个产品对象的输入值而不创建每个产品对象的单独的div？

ngModel可以工作，但是由于我想在输入值上显示选定的产品价格，因此它正在为每个产品创建单独的div。

<div class="uk-column-1-4" >
    <div>
        <select class="uk-select uk-margin-top">
        <option *ngFor="let productDetail of product">{{ productDetail.productName }}</option>
        </select>
    </div>
    <div>
            <input class="uk-input uk-margin-top" type="number" name="quantity" min="1" max="10" value="productDetail.qty" />
    </div>
    <div *ngFor="let productDetail of product"> 
    <input class="uk-input uk-margin-top" id="price" name="price" type="number" [(ngModel)]="productDetail.price" /><span>₹</span>
</div>
<div>

</div>
    </div>

我想在输入字段上显示所选产品名称的价格，而不生成单独的字段。

Answer 1

您可以在ngModel上select来获取所选产品，然后执行一个函数来更改所选产品的索引（j），可以将其设置为将输入字段与所选产品绑定。

<div class="uk-column-1-4" >
    <div>
        <select (change)="onChange($event.target.value)" name="selectedOption" class="uk-select uk-margin-top">
        <option *ngFor="let productDetail of product; let i = index" [value]="i">{{ productDetail.productName }}</option>
        </select>
    </div>
    <div>
            <input class="uk-input uk-margin-top" type="number" name="quantity" min="1" max="10" value="productDetail.qty" />
    </div>
    
    <input class="uk-input uk-margin-top" id="price" name="price" type="number" [(ngModel)]=" [(ngModel)]="product.length==0?tempPrice:product[j]['price']" /><span>₹</span>

<div>

</div>
    </div>

这是更新后的stackblitz

错误是，当product数组为空时，product[j]即product[0]未定义，我通过创建一个临时变量（tempPrice）来绑定该变量来解决它。 product为空时输入。

希望这会有所帮助:) 发表评论以寻求进一步的帮助。