首页 文章

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

提问于
浏览 次
2

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

研究我已经添加了[1]如下所示，以便使用 2 路 data-binding，但是，不知道为什么页面只是继续加载而不是没有任何错误的崩溃。当我删除 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. 选项的无线电控制[6]
  3. span 元素用于打印计算的价格。

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

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

提前致谢

javascript angular typescript

4 回答

  • 0

    变量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" />

    看一下文件中的例子;

    编辑

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

    selectedOption = item.options[0].value

    回复于
  • 0

    编辑：查看 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。

    回复于
  • 0

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

    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;

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

    回复于
  • 0

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

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

    找不到问题，为什么只有当我实现了 ngModel 标签时才会出现问题，而实际情况并非如此。但是，我删除了分裂功能，一切都很好。

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

    回复于

相关问题