使用angular2或打字稿输入时如何避免重复数据

Question

我有一个包含内容的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属性。