添加负计数并提交数组中的数据

Question

我在数组中添加负计数时遇到问题。当我尝试加或减时没有值显示。当我使用数组方法时出现问题。抱歉，我是数组方法的新手。你们能告诉我我的故障代码在哪里吗？这是我在 stackblitz

中的演示代码

HTML

<div class="p-buttom">
    <ion-button expand="full" color="dark" (click)="add()">Add</ion-button>
</div>
    <div class="size-bg" *ngFor="let num of size;let i = index">
    <span style="display: flex;">
        <ion-col>
            <ion-item lines="none" size="6" class="border">
                <ion-label position="stacked">weight</ion-label>
        <ion-input type="text" class="uppercase" [(ngModel)]="data.weight[i]" name="menuCode"></ion-input>
            </ion-item>
        </ion-col>
        <ion-col>
            <ion-item lines="none" size="6" class="border">
                <ion-label position="stacked">Price</ion-label>
        <ion-input type="text" class="uppercase" [(ngModel)]="data.price[i]" name="menuCode"></ion-input>
            </ion-item>
        </ion-col>
    </span>
    <ion-label style="color: black; ">quantity</ion-label>
    <ion-col size="12">
        <div class="add-quatity">
            <ion-button class="removeBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="MinusMinOrder() ">
               -
            </ion-button>
            <ion-input class="itemCount no-padding" name="quantity" (keypress)="numberOnlyValidation($event)" [(ngModel)]="data.quantity[i]" value="{{addQuantityP[i]}}"></ion-input>
            <ion-button class="addBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="addQuantity(i) ">
                +
            </ion-button>
        </div>
    </ion-col>
    <div>
        <ion-button expand="full" color="danger" *ngIf="i >0" (click)="remove(i)">Delete</ion-button>
    </div>
    </div>
<div>
  <ion-button fill="solid " slot="end" (click)="addMenu() ">Submit</ion-button> 
</div>

组件

add(){
    this.size.push('');
  }

  remove(index) {
    this.size.splice(index,1)
  }
  minusQuantity(i){
    console.log(i);
    this.data.quantity[i]--;
    console.log(this.data.quantity[i]--);
  }
  addQuantity(i){
    console.log(i);
    this.data.quantity[i]++;
    console.log(this.data.quantity[i]++);
  }
addMenu(){
  console.log(this.data);
}

提前致谢

Answer 1

您的代码存在某些问题。

当您添加嵌套行时，您收集数据的方式将不起作用。
减去数量的方法名称不正确
您添加了 [(ngModel)]="data.quantity[i]" 这是不必要的，因为您没有进行任何双向数据绑定。

我已经修复了您的代码并用注释突出显示了更改。您可以在 Stackblitz

查看更改

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

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  size = [];
  // Changing the data structure to map nested rows
  data = [{
    weight: 0,
    price: 0,
    quantity: 0
  }]

  constructor() {}

  add() {
    this.size.push('');
  }

  remove(index) {
    this.size.splice(index, 1)
  }

  minusQuantity(i) {
    //Stop reducing quantity after 0
    this.data[i].quantity = this.data[i].quantity != 0 ? this.data[i].quantity - 1 : 0
  }

  addQuantity(i) {
    this.data[i].quantity = this.data[i].quantity + 1
  }
  addMenu() {
    console.log(this.data);
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      My app
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
   <div class="p-buttom">
        <ion-button expand="full" color="dark" (click)="add()">Add</ion-button>
    </div>
        <div class="size-bg" *ngFor="let num of size;let i = index">
        <span style="display: flex;">
            <ion-col>
                <ion-item lines="none" size="6" class="border">
                    <ion-label position="stacked">weight</ion-label>
            <ion-input type="text" class="uppercase" [(ngModel)]="data[i].weight" name="menuCode"></ion-input>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item lines="none" size="6" class="border">
                    <ion-label position="stacked">Price</ion-label>
            <ion-input type="text" class="uppercase" [(ngModel)]="data[i].price" name="menuCode"></ion-input>
                </ion-item>
            </ion-col>
        </span>
        <ion-label style="color: black; ">quantity</ion-label>
        <ion-col size="12">
            <div class="add-quatity">
                <ion-button class="removeBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="minusQuantity(i) ">
                   -
                </ion-button>
                <ion-input class="itemCount no-padding" name="quantity" (keypress)="numberOnlyValidation($event)" value="{{data[i].quantity}}"></ion-input>
                <ion-button class="addBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="addQuantity(i) ">
                    +
                </ion-button>
            </div>
        </ion-col>
        <div>
            <ion-button expand="full" color="danger" *ngIf="i >0" (click)="remove(i)">Delete</ion-button>
        </div>
        </div>
    <div>
      <ion-button fill="solid " slot="end" (click)="addMenu() ">Submit</ion-button> 
    </div>
</ion-content>

Answer 2

我在您的代码中发现了问题。如果要添加动态创建数组，则需要初始化对象数组的默认值。

喜欢

size = [];

这是您需要完成的结果数组。您有一个 UI 对象具有某些属性的数据。

喜欢

{ weight: 0,
  quantity: 0,
  price: 0,
 }

现在您的对象已准备好放入大小数组。

当你点击

add() {
 this.size.push({ weight: 0,
  quantity: 0,
  price: 0,
 });
}

function, 每次push这个对象即可。在 angular UI 中，将创建具有新值的新对象。无需担心任何其他复杂的逻辑。

我正在为您提供完整的解决方案。你可以同时添加多个项目我测试过。如果您需要我网站的任何帮助，请告诉我。谢谢这是link的解决方案。

干杯。

添加负计数并提交数组中的数据

add minus count and submit data in array

angular

typescript

ionic-framework

dynamic-arrays