单击按钮时使用角度6的增量文本框

时间:2018-11-22 06:30:19

标签: angular6

我正在尝试使用角度6在单击按钮时重复文本框。 当我单击“添加”按钮以添加文本框时,它会添加,但是当我键入一个字母后输入它会失去焦点

HTML

  

  <td *ngFor="let col of columns" width="{{col.width}}"  [innerHtml]="rowData[col.field]">
    {{rowData[col.field]}}
  </td>
  <td width="50">
      <button pButton type="button" label="Edit" [value]="rowData" (click)="updatePoll(rowData)"></button>
      &nbsp;&nbsp;<button pButton type="button" class="ui-button-danger" label="delete" [value]="rowData" (click)="deletePoll(rowData._id)"></button>
  </td>

      

      <div class="ui-g-12" *ngFor="let o of mmpollRequest.option;let index = index;trackBy:trackByFn;">
          <div class="ui-g-2">
              <label for="option">Option</label>
          </div>
          <div class="ui-g-10">
              <input pInputText id="option{{index}}" [(ngModel)]="mmpollRequest.option[index]"  />
          </div>
      </div>

  </div>
  <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
          <button type="button" pButton icon="fa fa-close" (click)="delete()" label="Delete"></button>
          <button type="button" pButton icon="fa fa-close" (click)="increment()" label="ADD"></button>
          <button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
      </div>
  </p-footer>

TS FILe

  constructor(private service: MmpollService, private messageService: MessageService) { }

  ngOnInit() {
    this.loading = true;
    this.mmpollRequest.sdate = new Date();
    this.mmpollRequest.edate = new Date();
    console.log(this.mmpollRequest.sdate);
    this.service.getMmpollData(this.mmpollRequest).subscribe(
      (data:any)=>{
        this.totalRows = data.data.rowCount
        this.cols = data.data.tableHeader;
        this.MmpollResponse = data.data.data;
        this.loading = false;
      }
    )
  }

  updatePoll(row) {
    this.mmpollRequest = {...row};
    console.log(row);
    this.displayDialog = true;
  }

  deletePoll(row) {
    var result = confirm("Do you want to delete this record?");
    if (result) {
      this.service.deleteRecord(row).subscribe(
        (data:any)=>{
          console.log(data);
          this.showSuccess(data.message,data.data);
          this.ngOnInit();
        }
      )
    }

  }
    increment(){
     this.mmpollRequest.option.push(1);
    }
    save(){
      console.log(this.mmpollRequest);
     }
  }

,当添加新记录时,添加新文本框不起作用。 请提出一些解决方案,或者如果有其他解决方案。.

0 个答案:

没有答案