Question

要求
购物车中有一个项目列表。每个项目都有选项，数量，价格。需要根据项目数量和选项的变化来计算价格。

研究我已经添加了[（ngModel）]如下所示，以便使用双向数据绑定，但是，不知道为什么页面只是继续加载而不是崩溃没有任何错误。当我删除ngModel属性时，页面加载成功。

<span class="price col-1 pull-right" >{{ orderType*price}}</span>
<div class="qty" style="margin:0;">
     <span class="spinner">
        <span class="sub">-</span>
        <input type="number" id="qty" name="qty" min="1" max="100" 
               value="1" class="qty-spinner" [(ngModel)]="quantity" />
        <span class="add">+</span>
     </span>
 </div>
 <div class="type">
     <label class="radio inline" *ngFor="let option of item.options; let k = index"> 
     <input id="{{'toggle-half-'+item.id+'-'+j}}" type="radio" 
            name="{{'option-toggle-'+item.id+'-'+j}}" [value]="option.value" 
            [checked]='k===0' [(ngModel)]="orderType" />
     <span>{{option.title}} </span> 
     </label>
 </div>

TypeScript代码

quantity:number;
orderType:number;
price:number;

constructor() {
    this.quantity = 1;
    this.price = 0;
}

使用的控件
1）数量控制输入类型编号的数量。
2）选项的无线电控制[半/全]
3）用于打印计算价格的span元素。

预期输出
当我们更改数量或选项时，当前设置为0的价格应该更新。
例如。选项[半] = 10的值设置
例如。选项[完整] = 20

的值设置

请告知我如何实现这一点，上述逻辑和实施是否正确？

提前致谢

Answer 1

变量option已在ngFor指令中使用。见行：

<label class="radio inline" *ngFor="let option of item.options; let k = index">

为ngModel使用其他变量，例如：

<input id="{{'toggle-half-'+item.id+'-'+j}}"  
       type="radio" 
       name="{{'option-toggle-'+item.id+'-'+j}}" 
       [value]="option.value"
       [(ngModel)]="selectedOption" />

查看documentation;

中的示例

修改

此外，您还要强制checked绑定ngModel属性。而不是这样做，只需在您的情况下使用您想要的值初始化ngModel

selectedOption = item.options[0].value

Answer 2

编辑：查看jkris回答中共享的文档示例，value对无线电输入有意义。我仍然怀疑checked在与[(ngModel)]结合使用时会创建更新循环。

我注意到除了NgModel绑定之外你还绑定了checked。如果你删除它，它是否保持正确的行为并防止崩溃？

<input type="number" class="qty-spinner" min="1" max="100" 
       name="quantity" [(ngModel)]="quantity" />


<input type="radio" 
       [value]="option.value" name="option" [(ngModel)]="option" />

否则，另一种选择是使用[checked]和(click)（或类似）绑定代替NgModel。

Answer 3

不确定为什么它会崩溃，但如果我是你。构造函数

constructor() {
    this.quantity = 1;
    this.price = 0;
}

我将使用ngInit，因为它是双向绑定。

     import { OnInit } from '@angular/core';

        export class myClas implements OnInit {

        ngOnInit() {
            this.quantity = 1;
            this.price = 0;
        }

    }

其次，您的单选按钮和输入类型编号有价值。你确定它们返回了类型号的值吗？如果我是你，我将首先使用或尝试字符串，然后将其转换为我想要的数字类型。或者使用烟斗。错误的类型转换有时会很昂贵。所以你可以尝试

quantity:string;
orderType:string;
price:string;

首先，然后进行数字转换？

Answer 4

现在问题已解决。描述中的代码片段是在div标签之间实现的，该标签具有* ngFor指令，该指令遍历项目列表。

问题
为了将项目列表分成2列“div.col-md-6”，我实现了一个函数，该函数返回了一个包含2个数组的数组，每个数组包含一组项，以便迭代每个数组并显示项每一栏。

无法找到问题，为什么只有在我实现了ngModel标记时才会出现问题，而实际情况并非如此。但是，我删除了分裂功能，一切都运行正常。

感谢所有人的努力和帮助。

Angular 4 - 如何根据数量和期权的变化计算价格

4 个答案: