[英]How to avoid repeat of data when entered using angular2 or typescript
I have a div with contents and have an add button, if i click on add button, the same contents div is displayed/added.. If i click on add button multiple times, those many times the div i repeated. 我有一个包含内容的div并具有一个添加按钮,如果我单击添加按钮,则将显示/添加相同的内容div。如果我多次单击添加按钮,则会重复这些次数。 Till this it is working fine, but when i enter data to any one div, same data is reflecting on the addition div.
到此为止一切正常,但是当我向任何一个div输入数据时,相同的数据会反映在附加div上。 Can anyone help me to solve this issue.
谁能帮我解决这个问题。 I need data to be on the div where i type and rest div must stay empty.
我需要将数据放在我输入的div上,其余div必须保持为空。
HTML: HTML:
<md-card *ngFor="let position of products; let row_ind = index ">
<div>
<md-input-container>
<input mdInput type="text" name="position.workName [(ngModel)]="workDetails.workName"> </md-input-container>
<md-input-container> <input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workPlace" > </md-input-container>
</div>
<div >
<md-input-container><input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workUnit"> </md-input-container>
<md-input-container> <input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workCountry" > </md-input-container> </md-card>
ts: TS:
this.products = [{
"workName": "",
"workPlace":"",
"workUnit":"",
"workCountry":""
}];
open(){
var item = {
"workName": "",
"workPlace":"",
"workUnit":"",
"workCountry":"",
}
this.products.push(item);
}
public products:Array<any>;
export class Work {
public workName:string;
public workPlace: string;
public workUnit: string;
public workCountry :string;
}
Public workDetails:workDetails = new Work();
I think to create an array of objects you will have to do something like this, 我认为要创建对象数组,您将必须执行以下操作,
ts: TS:
this.products = [{"workName": "", "workPlace": "", "workUnit": "", "workCountry": ""}, {"workName": "", "workPlace": "", "workUnit": "", "workCountry": ""}, {"workName": "", "workPlace": "", "workUnit": "", "workCountry": ""}];
openAddPosition(){
var item = {
"workName": "",
"workPlace":"",
"workUnit":"",
"workCountry":"",
}
this.products.push(item);
}
public products:Array<Work>;
export class Work {
public workName:string;
public workPlace: string;
public workUnit: string;
public workCountry :string;
}
public workDetails:Work = new Work();
html: HTML:
<button md-mini-fab class="md-fab md-mini add-task" mdTooltipPosition="below" mdTooltip="Add" aria-label="New Task" (click)="openAdd()" style="bottom: 70%; right: 2%;">
<md-icon style="color:white;">add</md-icon>
</button>
<md-card layout="column" class="border-top-3px col-lg-12 col-md-12 col-sm-12 col-xs-12 " *ngFor="let workDetails of products">
<div class="clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h6 class="color-primary md-headline" style="font-size:18px;">Adding</h6>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size:13px;">
<md-input-container>
<input mdInput type="text" [(ngModel)]="workDetails.workName" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
</md-input-container>
<md-input-container>
<input mdInput type="text" [(ngModel)]="workDetails.workPlace" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
</md-input-container>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size: 13px;
text-align: left;">
<md-input-container>
<input mdInput type="text" [(ngModel)]="workDetails.workUnit" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
</md-input-container>
<md-input-container>
<input mdInput type="text" [(ngModel)]="workDetails.workCountry" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
</md-input-container>
</md-card>
Note: 注意:
TS: I have created an array of work TS:我创造了一系列的作品
HTML: Added a for loop and removed the name attribute. HTML:添加了一个for循环并删除了name属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.