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

对于发票表单，如何显示每个产品对象的输入值，而不创建每个产品对象的单独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>

{{productDetail.productName}
₹

---

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

您可以在

选择
上选择
ngModel
，这将获得所选产品，然后生成一个函数来更改所选产品的索引（
j
），可以设置为将输入字段与所选产品绑定



{{productDetail.productName}
对不起，你的问题不清楚。你能详细说明一下你说的是哪个部门吗？甚至可以尝试包括stackblitz。在代码中有一个名为price的输入字段，我使用*ngFor在product对象上循环，但它为每个选定的产品创建单独的输入字段，我不希望我希望在相同的输入字段上显示选定的产品价格，而不创建新的输入字段。如何做到这一点？您的意思是像
下面的
{{productDetail.price}}
？输入字段本身没有。输入用于接受用户的数据。为什么您在这里使用输入标记？您是在选择选项之前还是之后收到错误？在之前。实际上，我添加列表中的产品在添加此代码后不会显示。Mr-K10的回答只是一个提示，而不是一个完整的解决方案。如果您理解这种方法，那么您应该能够自己编写其余的代码。确保正确初始化j，并且change索引将i分配给j。用于
onModelChange
中函数的索引
i
超出范围，因此更改了代码，现在请将其签出<代码>[（ngModel）]=“product[j].price”
这也可能会产生一些错误，您可能需要检查它，或者您可以提供代码（stackblitz链接）以进行所需的更改。我应该在onChange函数中写些什么请帮助我，我已经在stackblitz链接中提供了代码。谢谢：）