添加负计数并提交数组中的数据
add minus count and submit data in array
我在数组中添加负计数时遇到问题。当我尝试加或减时没有值显示。当我使用数组方法时出现问题。抱歉,我是数组方法的新手。你们能告诉我我的故障代码在哪里吗?这是我在 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);
}
提前致谢
您的代码存在某些问题。
- 当您添加嵌套行时,您收集数据的方式将不起作用。
- 减去数量的方法名称不正确
- 您添加了
[(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>
我在您的代码中发现了问题。如果要添加动态创建数组,则需要初始化对象数组的默认值。
喜欢
size = [];
这是您需要完成的结果数组。您有一个 UI 对象具有某些属性的数据。
喜欢
{ weight: 0,
quantity: 0,
price: 0,
}
现在您的对象已准备好放入大小数组。
当你点击
add() {
this.size.push({ weight: 0,
quantity: 0,
price: 0,
});
}
function, 每次push这个对象即可。在 angular UI 中,将创建具有新值的新对象。无需担心任何其他复杂的逻辑。
我正在为您提供完整的解决方案。你可以同时添加多个项目我测试过。如果您需要我网站的任何帮助,请告诉我。谢谢
这是link的解决方案。
干杯。
我在数组中添加负计数时遇到问题。当我尝试加或减时没有值显示。当我使用数组方法时出现问题。抱歉,我是数组方法的新手。你们能告诉我我的故障代码在哪里吗?这是我在 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);
}
提前致谢
您的代码存在某些问题。
- 当您添加嵌套行时,您收集数据的方式将不起作用。
- 减去数量的方法名称不正确
- 您添加了
[(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>
我在您的代码中发现了问题。如果要添加动态创建数组,则需要初始化对象数组的默认值。
喜欢
size = [];
这是您需要完成的结果数组。您有一个 UI 对象具有某些属性的数据。
喜欢
{ weight: 0,
quantity: 0,
price: 0,
}
现在您的对象已准备好放入大小数组。
当你点击
add() {
this.size.push({ weight: 0,
quantity: 0,
price: 0,
});
}
function, 每次push这个对象即可。在 angular UI 中,将创建具有新值的新对象。无需担心任何其他复杂的逻辑。
我正在为您提供完整的解决方案。你可以同时添加多个项目我测试过。如果您需要我网站的任何帮助,请告诉我。谢谢 这是link的解决方案。
干杯。