angular2またはtypescriptを使用して入力したときのデータの繰り返しを避ける方法

Question

コンテンツを含むdivがあり、追加ボタンがある場合は、追加ボタンをクリックすると同じコンテンツdivが表示/追加されます。複数回、それらの何度も繰り返されるdiv。これまでうまくいきましたが、いずれかのdivにデータを入力すると、同じデータが加算divに反映されます。誰も私がこの問題を解決するのを助けることができますか？私はデータをdivに入力する必要があり、ここでdivは空でなければなりません。

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：

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(); 

Answer 1

私はあなたがこのような何かを行う必要がありますオブジェクトの配列を作成するために考えて、

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：

<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> 

注：

1. TS：私は

2. 作業

   の配列を作成したHTML：forループとname属性を削除追加しました。