Angular 将对象推入数组,并为其添加*NGO

Angular 将对象推入数组,并为其添加*NGO,angular,Angular,当我单击按钮addRoom时,我想向Aray添加一个对象。并在视图中循环此项。但数组中的数据重复出现。对不起,我的英语,如果你不懂,可以问我的意见。谢谢你的阅读 我的代码: html }您指的是这个.object无处不在,因此这自动意味着数组中的所有对象都是相同的。您需要将每个项目作为唯一的项目来区分它们 这里有一个非常粗糙的例子,你应该改进并进一步研究。还要注意命名约定,例如我指的是Room=[]而不是Room=[]。还考虑为房间模型< 好的,在添加新房间时,创建一个空对象并递增一个局部

当我单击按钮addRoom时,我想向Aray添加一个对象。并在视图中循环此项。但数组中的数据重复出现。对不起,我的英语,如果你不懂,可以问我的意见。谢谢你的阅读

我的代码: html


}

您指的是
这个.object
无处不在,因此这自动意味着数组中的所有对象都是相同的。您需要将每个项目作为唯一的项目来区分它们

这里有一个非常粗糙的例子,你应该改进并进一步研究。还要注意命名约定,例如我指的是
Room=[]
而不是
Room=[]
。还考虑为<代码>房间模型< <强> <强>

好的,在添加新房间时,创建一个空对象并递增一个局部变量
idx
,该变量引用数组中的索引,在添加房间后,让我们只递增该变量:

addRoom(){
  this.rooms.push({room: this.idx+1, adult: null, child: null, pricePN: null})
  this.idx++;
}
在您的模板中,使用双向绑定,当您添加成人(和儿童)时,这样我们就不需要调用单独的函数来添加该房间中的儿童或家长的数量。但是当进行更改时,调用
calculate
,传递索引(
i
),该索引已在
rooms
的迭代中声明

<select [(ngModel)]="item.adult" (change)="calculate(i)">
您有相当多的变量,基本上可以从中删除除数组声明之外的所有变量

这里有一个可以玩的

addRoom(){
  this.rooms.push({room: this.idx+1, adult: null, child: null, pricePN: null})
  this.idx++;
}
<select [(ngModel)]="item.adult" (change)="calculate(i)">
calculate(index) {
  this.rooms[index].pricePN = 
        1000+this.rooms[index].adult*200+this.rooms[index].child*100;
}